AvaloniaUI(三、样式篇)-526互联

　　avalonia的样式和wpf有不小的区别，它与css样式表很像，wpf的样式是使用定义的key 或者类型来使用样式的，avalonia是与css一样是使用选择器来使用样式的，选择器有很多种，几乎与css的选择器一样，有类选择器，Id选择器，伪类选择器等，几乎常用的就那么几种，虽然他的使用方法与css类似，但是写法还是与wpf很相似了

类型选择器

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="test.Views.MainView"
             x:DataType="vm:MainViewModel">
  <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:MainViewModel />
  </Design.DataContext>
    <UserControl.Styles>
        <Style Selector="TextBlock">
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>
    </UserControl.Styles>
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="{Binding Greeting}"/>
        <TextBlock>test1</TextBlock>
        <TextBlock>test2</TextBlock>
    </StackPanel>
  
    
</UserControl>

从上面的style的写法上看的出来，avalonia的样式只有个Selector 字段用来表明选择器的类型，与wpf不同，不需要写明 TargetType 上面的是类型选择器，Selector=“TextBlock” 表明所有的TextBlock都会应用这个样式

类选择器

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="test.Views.MainView"
             x:DataType="vm:MainViewModel">
  <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:MainViewModel />
  </Design.DataContext>
    <UserControl.Styles>
        <Style Selector="TextBlock.test">
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>
    </UserControl.Styles>
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="{Binding Greeting}"/>
        <TextBlock Classes="test">test1</TextBlock>
        <TextBlock Classes="test">test2</TextBlock>
    </StackPanel>
  
    
</UserControl>

类选择器只需要在Selector="TextBlock.test" 加.test 使用的时候需要使用 Classes=“test” 来标识一下就可以了

Id选择器

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="test.Views.MainView"
             x:DataType="vm:MainViewModel">
  <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:MainViewModel />
  </Design.DataContext>
    <UserControl.Styles>
        <Style Selector="TextBlock#test2">
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
        </Style>
    </UserControl.Styles>
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="{Binding Greeting}"/>
        <TextBlock Classes="test">test1</TextBlock>
        <TextBlock x:Name="test2">test2</TextBlock>
    </StackPanel>
  
    
</UserControl>

与类选择器类似，只不过.需要改成# 就是id选择器了 Selector=“TextBlock#test2” 使用的时候就不能用Classes了，需要加上x:Name=“test2”，这个x:Name才是id

现在问题来了，wpf的样式可以直接重写模板样式，avalonia可不可以呢?答案是当然可以，这个时候就需要加上targettype 的关键字了

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="test.Views.MainView"
             x:DataType="vm:MainViewModel">
    <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:MainViewModel />
    </Design.DataContext>
    <UserControl.Styles>
        <Style Selector="TextBlock#test2">
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="FontSize" Value="30"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>

        </Style>

        <Style Selector="TextBox#test3">
            <Setter Property="BorderBrush" Value="Red"></Setter>
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="Width" Value="150"></Setter>
            <Setter Property="Height" Value="30"></Setter>
            <Setter Property="Tag" Value="test"></Setter>
            <Setter Property="Text" Value="23123"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                BorderThickness="{TemplateBinding BorderThickness}">

                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{TemplateBinding Tag}"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center"></TextBlock>
                                <Grid Grid.Column="1" Margin="5,0,0,0">
                                    <TextPresenter  Name="PART_TextPresenter"
                                                   
                                                   HorizontalAlignment="Left"
                                                   VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                       CaretBrush="{TemplateBinding CaretBrush}"
                                       CaretIndex="{TemplateBinding CaretIndex}"
                                       LineHeight="{TemplateBinding LineHeight}"
                                       LetterSpacing="{TemplateBinding LetterSpacing}"
                                       PasswordChar="{TemplateBinding PasswordChar}"
                                       RevealPassword="{TemplateBinding RevealPassword}"
                                       SelectionBrush="{TemplateBinding SelectionBrush}"
                                       SelectionEnd="{TemplateBinding SelectionEnd}"
                                       SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
                                       SelectionStart="{TemplateBinding SelectionStart}"
                                       Text="{TemplateBinding Text,Mode=TwoWay}"
                                       TextAlignment="{TemplateBinding TextAlignment}"
                                       TextWrapping="{TemplateBinding TextWrapping}" />
                                </Grid>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style Selector="TextBox#test3:pointerover:focus">
            <Setter Property="BorderBrush" Value="Red"></Setter>
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>

        </Style>

    </UserControl.Styles>
    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="{Binding Greeting}"/>
        <TextBlock Classes="test">test1</TextBlock>
        <TextBlock x:Name="test2">test2</TextBlock>
        <TextBox x:Name="test3"></TextBox>
    </StackPanel>


</UserControl>

上面就重写了一个textbox文本框的样式，并加上了前面的标题

今天就写到这里吧，我的鼠标老跟我捣乱，没心情了。。。。。

边框avaloniaui avalonia

样式

样式css