WPF style 换肤

原文地址：http://www.cnblogs.com/DebugLZQ/p/3181040.html 原作者：DebugLZQ

UI的风格一致性是应用程序应当关注的重要特性。

1.Creating and using styles

用一个Demo，来总结Style。

MainWindow.xaml如下：

<Window x:Class="CreatingAndUsingStyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Styled Calculatot" Height="269" Width="180" ResizeMode="CanMinimize">
    <Window.Resources>
        <Style TargetType="Button" x:Key="numericStyle">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="Margin" Value="4" />
            <Setter Property="Padding" Value="6" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Blue"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Button" x:Key="operatorStyle" BasedOn="{StaticResource numericStyle}">
            <Setter Property="FontWeight" Value="ExtraBold" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Red" />
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
        <TextBox Background="Cyan" IsReadOnly="True"  Grid.ColumnSpan="4"/>
        <Button Content="7" Grid.Row="1" Style="{StaticResource numericStyle}"/>
        <Button Content="8" Grid.Row="1" Grid.Column="1" Style="{StaticResource numericStyle}"/>
        <Button Content="9" Grid.Row="1" Grid.Column="2" Style="{StaticResource numericStyle}"/>
        <Button Content="4" Grid.Row="2" Style="{StaticResource numericStyle}"/>
        <Button Content="5" Grid.Row="2" Grid.Column="1" Style="{StaticResource numericStyle}"/>
        <Button Content="6" Grid.Row="2" Grid.Column="2" Style="{StaticResource numericStyle}"/>
        <Button Content="1" Grid.Row="3" Style="{StaticResource numericStyle}"/>
        <Button Content="2" Grid.Row="3" Grid.Column="1" Style="{StaticResource numericStyle}"/>
        <Button Content="3" Grid.Row="3" Grid.Column="2" Style="{StaticResource numericStyle}"/>
        <Button Content="0" Grid.Row="4" Style="{StaticResource numericStyle}"/>
        <Button Content="=" Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" Style="{StaticResource operatorStyle}">
            <Button.Effect>
                <DropShadowEffect Color="Green" />
            </Button.Effect>
        </Button>
        <Button Content="+" Grid.Row="4" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
        <Button Content="-" Grid.Row="3" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
        <Button Content="X" Grid.Row="2" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
        <Button Content="/" Grid.Row="1" Grid.Column="3" Style="{StaticResource operatorStyle}"/>
    </Grid>
</Window>

效果如下：

Point of Interest

Setter的Property必须是依赖属性；

FrameworkStyle暴露了Style这个属性；

Style一般放在Resources中.

TargetType="Button" 指定Style应用的类型。

一般，我们使用Style的时候，我们都会设置这个（In practice ,TargetType is always specified.），想想为什么？

3. x:Key="numericStyle" 可以根据需要进行有或无。

a.当其有的时候，我们需要对需要 Style="{StaticResource numericStyle}" .

b.其不设置的时候，默认所有TargetType使用此Style。见2.

4. BasedOn="{StaticResource numericStyle}" 这是Style的继承。

Style继承时，可以修改BaseOn Style的Setter。如operatorStyle的部分所示。

Style继承很好用，但是要注意：基Style的修改会影响子style.

5.对于应用了Style的element，我们可以设置其属性值，且这个优先级更高（覆盖Style设置）。如"="Button的部分所示。

2.Applying a style automatically

我们移除 x:Key="numericStyle"。让所有Button使用这个style.

1.不为Style指定x:key，这个Style将应用于所有的x:Tyle element;

没有指定x:key，不代表其没有key，其key由x:Tyle定义，就本例而言是{x:Type Button}}，从Style继承中(xaml中绿色高亮代码)，可见一斑。

2.如果，这样的Style被Set在Window的Resource，则影响这个Window上的所有x:Type类型的element；

如果被set在application's resources，则影响所有window。

3.如果，我们希望某个element不应用这个style，我们可以设置它的Style属性为其他style；

如果想让它保持默认的样子，我们可以设置其Style="{x:Null}"，如Button “0”。

3.动态更换Style

在Skin文件夹中添加两个Resource Dictionary，如下：

View Code

并设置其Property为：Content/Aways Copy.

“These settings prevent the default compilation to BAML and also provide the flexibility to
change the skins without recompilation. ”

请参考DebugLZQ前面的博文：WPF整理-二进制资源和内容

MainWindow.xaml,MainWindow.xaml.cs如下:

<Window x:Class="WPFStyleTriggerAndControlTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="303.719" Width="530.785">
    <Grid Margin="0,0,2,0">
        <TextBox HorizontalAlignment="Left" Height="23" Margin="10,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="156,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
        <TextBox HorizontalAlignment="Left" Height="23" Margin="293,35,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="1.577,0.303"/>
        <Button Content="Button" HorizontalAlignment="Left" Margin="433,35,0,0" VerticalAlignment="Top" Width="75"/>
        <GroupBox FontSize="28" Header="Select Skin"  Margin="75,102,62,0" VerticalAlignment="Top" Height="158">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                <RadioButton Content="Normal" Checked="AllRadioButtonChecked"/>
                <RadioButton Content="Blue Skin" Checked="AllRadioButtonChecked"/>
                <RadioButton Content="Red Skin" Checked="AllRadioButtonChecked"/>
            </StackPanel>            
        </GroupBox>
    </Grid>
</Window>


namespace WPFStyleTriggerAndControlTemplate
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void AllRadioButtonChecked(object sender, RoutedEventArgs e)
        {
            switch (((RadioButton)sender).Content.ToString())
            { 
                case "Blue Skin":
                    ChangeSkin("Skins/BlueSkin.xaml");
                    break;
                case "Red Skin":
                    ChangeSkin("Skins/RedSkin.xaml");
                    break;
                case "Normal":
                    Application.Current.Resources.MergedDictionaries.Clear();
                    break;
            }
        }

        void ChangeSkin(string skinRelativeUri)
        {
            var si = Application.GetContentStream(new Uri(skinRelativeUri, UriKind.Relative));
            var rd = (ResourceDictionary)XamlReader.Load(si.Stream);
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(rd);
        }

    }
}

运行效果如下：