WPF Metro Button 中的多种样式资源

Question

我正在尝试将我的保存按钮实现为可重用按钮，原始按钮样式是这样的=>

            <Button Margin="5"
                    Padding="0"
                    Width="98" 
                    Cursor="Hand"
                    x:Name="btnSave" 
                    Click="btnSave_Click">
                          <StackPanel  Orientation="Horizontal" Height="25" Width="90">
                               <Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
                               <TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
                          </StackPanel>
            </Button>

只有文字和图片。所以我只想将此按钮用作可重复使用的按钮。所以我把这个按钮移到App.xaml 这样=>

<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Width" Value="98"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="FontSize" Value="12"/>               
                <Style.Resources>
                    <Style TargetType="StackPanel">
                        <Setter Property="Orientation" Value="Horizontal"/>
                        <Setter Property="Height" Value="25"/>
                        <Setter Property="Width" Value="90"/>
                        <Setter Property="Background" Value="Red"/>
                        <Style.Resources>
                            <Style TargetType="Image">
                                <Setter Property="Source" Value="/Image/Other/Save.ico"/>
                                <Setter Property="Width" Value="20"/>
                                <Setter Property="Margin" Value="3 0"/>
                            </Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="VerticalAlignment" Value="Center"/>
                                <Setter Property="Margin" Value="15 0"/>
                                <Setter Property="Text" Value="Save"/>
                            </Style>
                        </Style.Resources>
                    </Style>
                </Style.Resources>
            </Style>

但移动后，此按钮不再起作用。请让我知道为什么这个不起作用。

Answer 1

你说你想重用样式，所以你不应该嵌套它们。正确的做法是：

<Style x:Key="SaveButton" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
                                <Image/>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Answer 2

您需要在某处定义StackPanel 并将Button 的Content 属性设置为它。您可以将StackPanel 定义为App.xaml 中Style 旁边的非共享资源，如下所示：

<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
    <Image Source="screen.png" Width="20" Margin="3 0"></Image>
    <TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>

<Style TargetType="Button" x:Key="SaveButton">
    <Style.Resources>
    </Style.Resources>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Width" Value="98"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Content" Value="{StaticResource sp}" />
</Style>