WPF系列:樣式 - liunlls－IT工程師數位筆記本

文章出處

　　一般簡單的樣式我們可以直接寫在控件中

<Button Canvas.Left="20" Canvas.Top="30" Width="100" Height="120" Content="A"/>

　　也可以通過Style屬性定義該系列控件的樣式

  <Style TargetType="{x:Type Button}">
      <Setter Property="Background" Value="Green"></Setter>
      <Setter Property="FontSize" Value="24" ></Setter>
  </Style>

　　然后通過鍵值，可以賦予該系列某一類型特定的樣式，這個有點像CSS里的class

   <Style x:Key="ButtonMenu">
       <Setter Property="Button.Background" Value="Red"></Setter>
       <Setter Property="Button.Width" Value="100"></Setter>
       <Setter Property="Button.Height" Value="100"></Setter>
       <Setter Property="Button.FontSize" Value="24" ></Setter>
   </Style>

　　WPF中的樣式還可以通過BasedOn屬性繼承樣式

 <Style x:Key="ButtonTitle" BasedOn="{StaticResource ButtonMenu}" TargetType="Button">
     <Setter Property="Background">
         <Setter.Value>
             <LinearGradientBrush>
                 <GradientStop Offset="0.2" Color="LightBlue"></GradientStop>
                 <GradientStop Offset="0.5" Color="Blue"></GradientStop>
                 <GradientStop Offset="0.9" Color="DarkBlue"></GradientStop>
             </LinearGradientBrush>
         </Setter.Value>
     </Setter>
     <Setter Property="Button.Width" Value="100"></Setter>
     <Setter Property="Button.Height" Value="100"></Setter>
 </Style>

　　最后把所有代碼合在一起

    <Canvas>
        <Canvas.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background" Value="Green"></Setter>
                <Setter Property="FontSize" Value="24" ></Setter>
            </Style>
            <Style x:Key="ButtonMenu">
                <Setter Property="Button.Background" Value="Red"></Setter>
                <Setter Property="Button.Width" Value="100"></Setter>
                <Setter Property="Button.Height" Value="100"></Setter>
                <Setter Property="Button.FontSize" Value="24" ></Setter>
            </Style>
            <Style x:Key="ButtonTitle" BasedOn="{StaticResource ButtonMenu}" TargetType="Button">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush>
                            <GradientStop Offset="0.2" Color="LightBlue"></GradientStop>
                            <GradientStop Offset="0.5" Color="Blue"></GradientStop>
                            <GradientStop Offset="0.9" Color="DarkBlue"></GradientStop>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>
        </Canvas.Resources>
        <Button Canvas.Left="20" Canvas.Top="30" Width="100" Height="120" Content="A"/>
        <Button Canvas.Left="150" Canvas.Top="30" Style="{StaticResource ButtonMenu}" Content="B" />
        <Button Canvas.Left="280" Canvas.Top="30" Style="{StaticResource ButtonTitle}" Content="C" />
    </Canvas>