更改控制項外觀

記錄更改控制項外觀學習

更改控制項外觀有三種方法：屬性、Style、ControlTemplate。

Style：可以一次對多個控制項設置屬性。

ContentTemplate: 自定義Control外觀，利用行為更改外觀。

屬性：
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button FontSize="14"
                FontWeight="Bold">
            <Button.Background>
                <!--Background類型是個brush LinearGradientBrush繼承brush，因此作為Background值-->
                <LinearGradientBrush StartPoint="0,0.5"
                                     EndPoint="1,0.5">
                    <GradientStop Color="Green"
                                  Offset="0.0" />
                    <GradientStop Color="White"
                                  Offset="0.9" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
    </Grid>
</Window>

Style：
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize"
                    Value="14" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5"
                                         EndPoint="1,0.5">
                        <GradientStop Color="Green"
                                      Offset="0.0" />
                        <GradientStop Color="White"
                                      Offset="0.9" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button FontSize="14"
                FontWeight="Bold">
        </Button>
    </Grid>
</Window>

ControlTemplate:
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Template"> 
                <!--Template是Button的一個屬性值-->
                <Setter.Value>
                    <!--ControlTemplate繼承Template-->
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Border1"                                 
                                CornerRadius="20"
                                BorderThickness="1"
                                BorderBrush="Black">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0.5"
                                                     EndPoint="1,0.5">
                                    <GradientStop Color="{Binding Background.Color, 
                                     RelativeSource={RelativeSource TemplatedParent}}"
                                                  Offset="0.0" />
                                    <GradientStop Color="White"
                                                  Offset="0.9" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter Margin="2"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              RecognizesAccessKey="True" />
                        </Border>
                        <ControlTemplate.Triggers> 
                            <!--按鈕的IsPressed只讀屬性 當IsPressed為true的時候-->                            
                            <Trigger Property="IsPressed"
                                     Value="true">
                                <!--設置ContentTemplate里的Border1,只能是當前ContentTemplate的Content-->
                                <Setter TargetName="Border1"
                                        Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0.5"
                                                             EndPoint="1,0.5">
                                            <!--TemplateParent就是當前修飾的button-->
                                            <GradientStop Color="{Binding Background.Color, 
                                             RelativeSource={RelativeSource TemplatedParent}}"  
                                                          Offset="0.0" />
                                            <GradientStop Color="DarkSlateGray"
                                                          Offset="0.9" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button FontSize="14"
                FontWeight="Bold" Background="Yellow" >
        </Button>
    </Grid>
</Window>