Avalonia学习（二十）-登录界面演示

今天开始继续Avalonia练习。

本节：演示实现登录界面

在网上看见一个博客，展示Avalonia实现，仿照GGTalk，我实现了一下，感觉是可以的。将测试的数据代码效果写下来。主要是样式使用，图片加载方式。

只有前台代码

<Window xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:vm="using:LoginAvalonia.ViewModels"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="LoginAvalonia.Views.MainWindow"x:DataType="vm:MainWindowViewModel"Icon="/Assets/users2.png"Width="430"Height="340"CanResize="False" WindowStartupLocation="CenterScreen"Title="LoginAvalonia"><Design.DataContext><!-- This only sets the DataContext for the previewer in an IDE,to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) --><vm:MainWindowViewModel/></Design.DataContext><Window.Styles ><Style Selector="TextBox.tb1"><Setter Property="Margin" Value="0,-40,0,0"/><Setter Property="Height" Value="26"/><Setter Property="Width" Value="250"/><Setter Property="Watermark" Value="账号"/><Setter Property="BorderBrush" Value="#80c0ff"/></Style><Style Selector="TextBox.tb2"><Setter Property="Margin" Value="0,35,0,0"/><Setter Property="Height" Value="26"/><Setter Property="Width" Value="250"/><Setter Property="Watermark" Value="密码"/><Setter Property="BorderBrush" Value="#80c0ff"/><Setter Property="PasswordChar" Value="*"/></Style><!--######<TextBox标签>######--><Style Selector="Image.img1"><Setter Property="Margin" Value="0,-250,0,0"/><Setter Property="Width" Value="430"/></Style><Style Selector="Image.img2"><Setter Property="Margin" Value="0,-190,0,0"/><Setter Property="Width" Value="73"/><Setter Property="Height" Value="73"/></Style><!--######<Image标签>######--><Style Selector="TextBlock.tbk1"><Setter Property="Margin" Value="5,5,0,0"/><Setter Property="Foreground" Value="White"/></Style><Style Selector="TextBlock.tbk2"><Setter Property="Margin" Value="292,213,0,0"/><Setter Property="Foreground" Value="#0c7ab9"/><Setter Property="Cursor" Value="Hand"/></Style><Style Selector="TextBlock.tbk3"><Setter Property="Margin" Value="275,305,0,0"/><Setter Property="Foreground" Value="#696969"/></Style><!--######<TextBlock标签>######--><Style Selector="Button.bt1"><Setter Property="Margin" Value="100,195,0,0"/><Setter Property="Width" Value="250"/><Setter Property="Height" Value="40"/><Setter Property="Background" Value="#407cff"/><Setter Property="Foreground" Value="White"/><Setter Property="FontSize" Value="17"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/></Style><!--######<Button标签>######--><Style Selector="CheckBox.cbx1"><Setter Property="Margin" Value="89,105,0,0" /><Setter Property="BorderBrush" Value="#3c9fc5"/></Style><Style Selector="CheckBox.cbx2"><Setter Property="Margin" Value="190,105,0,0"/><Setter Property="BorderBrush" Value="#3c9fc5"/></Style><!--######<CheckBox标签>######--></Window.Styles><StackPanel><Border Background="White"BorderBrush="Gray"BorderThickness="1"Padding="0"Width="430"Height="340"><Grid><Image Classes="img1" Source="avares://LoginAvalonia/Assets/image_sign.png" ></Image><Image Classes="img2" Source="avares://LoginAvalonia/Assets/8.png" /><TextBlock Classes="tbk1">GGTalk 2020</TextBlock><TextBlock Classes="tbk2">注册登录</TextBlock><TextBlock Classes="tbk3">企业即时通讯系统</TextBlock><TextBox Classes="tb1"/><TextBox Classes="tb2"/><CheckBox Classes="cbx2" >自动登录</CheckBox><CheckBox Classes="cbx1" >记住密码</CheckBox><Button Classes="bt1" >登录</Button></Grid></Border></StackPanel>
</Window>

运行效果：

使用的图片：

1.

2.

3.