【6月日新计划07】WPF入門-Style/Template

1. Attribute

   <Button Content="Button" Height="23" Name="button3" Width="75">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black" />
            </Style>
        </Button.Style>
   </Button>

2. Setter

先設定所有控件通用的樣式，然後在調整每一個控件特有的樣式

<Window.Resources>
    <Style x:Key="MouseOverHighlightStyle" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="Padding" Value="5"/>
        <EventSetter Event="TextBlock.MouseEnter" Handler="element_MouseEnter"/>
        <EventSetter Event="TextBlock.MouseLeave" Handler="element_MouseLeave"/>
    </Style>
</Window.Resources>

<StackPanel VerticalAlignment="Center">
    <TextBlock Text="This is a TextBlock" Style="{StaticResource MouseOverHighlightStyle}"/>
</StackPanel>

1.如果沒有設定唯一key(x:key),那麼就會作用到所有的Testblock上面。 2.可以設定多個style，一個style對應一個控件的樣式

3. Trigger

3.1 Basic Trigger

案例：当勾选了目标时，字体和颜色会改变

    <Window.Resources>
        <Style TargetType="CheckBox">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Trigger.Setters>
                        <Setter Property="FontSize" Value="20"/>
                        <Setter Property="Foreground" Value="Orange"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox Content="A" Margin="5"/>
        <CheckBox Content="B" Margin="5"/>
        <CheckBox Content="C" Margin="5"/>
        <CheckBox Content="D" Margin="5"/>
    </StackPanel>

3.2 MultiTrigger

<Style TargetType="CheckBox">
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="true"/>
                <Condition Property="Content" Value="B"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="FontSize" Value="20"/>
                <Setter Property="Foreground" Value="Orange"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

4. Template

数据模板和控件模板的关系如下图所示：

Control类型
    - Template属性 (ControlTemplate类型)
        - ContentPresenter
            - ContentTemplate (DataTemplate类型)


ContentControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ContentTemplate (DataTemplate类型)


ItemsControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ItemsPanel属性 (ItemsPanelTemplate类型) 指定布局容器
    - ItemTemplate属性 (DateTemplate类型) 每个Item的Template

5. Border

Border 是一个装饰的控件，此控件绘制一个边框、一个背景，在 Border 中只能有一个子控件，但它的子控件是可以包含多个子控件。

Border 的几个重要的属性：

• Background：用来绘制背景的 Brush 对象。

• BorderBrush：用来绘制边框的 Brush 对象。

• BorderThickness：边框的宽度

• CornerRadius：每一个角圆的半径

• Padding：内容与边框的之间的间隔。

<Window.Resources>
    <!--Border的样式-->
    <Style TargetType="{x:Type Border}" x:Key="gBox">
        <Setter Property="BorderBrush" Value="CornflowerBlue"/>
        <Setter Property="Background" Value="#dfe6ec"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="CornerRadius" Value="2"/>
        <Setter Property="Padding" Value="5"/>
    </Style>
</Window.Resources>
    
<Grid>
    <Border  Style="{StaticResource gBox}">
        <TextBlock Text="This is Border Demo"/>
    </Border>
</Grid>

5.1 鼠標移入移出

鼠標移入移出，有陰影效果

      <ItemsControl Grid.Row="1" ItemsSource="{Binding MyIndexBox}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border
                        Margin="5"
                        Background="{Binding Color}"
                        BorderBrush="Wheat"
                        BorderThickness="1"
                        CornerRadius="5">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Effect">
                                            <Setter.Value>
                                                <DropShadowEffect
                                                    BlurRadius="10"
                                                    ShadowDepth="2"
                                                    Color="#DDDDDD" />
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <StackPanel
                            Width="185"
                            Height="auto"
                            Orientation="Vertical">
                            <materialDesign:PackIcon
                                Width="30"
                                Height="30"
                                Margin="4,8"
                                Kind="{Binding Icon}" />
                            <TextBlock
                                Margin="4"
                                FontSize="15"
                                Text="{Binding Description}" />
                            <TextBlock
                                Margin="4"
                                FontSize="18"
                                Text="{Binding Count}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>