c# - 未应用 Wpf 按钮样式

Question

我有一个窗口，有两个组框，每个组框有 3 个按钮，所有按钮都应用 3 种样式。样式是:

<Style x:Key="SaveButtonStyle" TargetType="Button" >            
    <Setter Property="Content">
        <Setter.Value>
            <DockPanel>                       
                <Image Source="/SalesSolution;component/Images/save.png"  Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />                        
                <Label Content="Save" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
            </DockPanel>                    
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Width" Value="100"/>
</Style>


<Style x:Key="UpdateButtonStyle" TargetType="Button"  >
    <Setter Property="Content">
        <Setter.Value>
            <DockPanel>
                <Image Source="/SalesSolution;component/Images/Refresh_font_awesome.png"  Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />
                <Label Content="Update" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
            </DockPanel>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Width" Value="100"/>
</Style>

<Style x:Key="DeleteButtonStyle" TargetType="Button"  >
    <Setter Property="Content">                    
        <Setter.Value>
            <DockPanel>
                <Image Source="/SalesSolution;component/Images/delete.png"  Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />
                <Label Content="Delete" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
            </DockPanel>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Width" Value="100"/>
</Style>

按钮的 XAML 代码:

//These three buttons do not applied  the styles:
     <Button HorizontalAlignment="Left" Name="buttonCompanySave" VerticalAlignment="Center" Click="buttonCompanySave_Click" Margin="188,215,0,323" Style="{StaticResource SaveButtonStyle}" />
     <Button HorizontalAlignment="Left" Name="buttonCompaniesUpdate" VerticalAlignment="Center" Click="buttonCompanyUpdate_Click" Margin="188,274,0,264" Style="{StaticResource UpdateButtonStyle}" />
     <Button HorizontalAlignment="Left" Name="buttonCompanyDelete" VerticalAlignment="Center" Click="buttonCompanyDelete_Click" Margin="188,333,0,205" Style="{StaticResource DeleteButtonStyle}" />



//These three buttons apply the styles:
    <Button HorizontalAlignment="Left" Name="buttonItemSave" VerticalAlignment="Bottom" Click="buttonItemSave_Click" Style="{StaticResource SaveButtonStyle}" />
    <Button HorizontalAlignment="Center" Name="buttonItemsUpdate" VerticalAlignment="Bottom" Click="buttonItemsUpdate_Click" Style="{StaticResource UpdateButtonStyle}" />
    <Button HorizontalAlignment="Right" Name="buttonItemDelete" VerticalAlignment="Bottom" Click="buttonItemDelete_Click" Style="{StaticResource DeleteButtonStyle}" />

奇怪的问题是:如果我将空白按钮(buttonCompanySave、buttonCompaniesUpdate、buttonCompanyDelete)移动到另一个组框，它们将应用样式!。我试图找出这个问题，但没有找到解决方案，我什至创建了新的组框和按钮。

Answer 1

这会导致您的样式更改 Content 属性，当您设置新的 Content 值时，将应用 Button 的默认样式，但不会有任何Image和Label。

除此之外，您应该创建 ContentPresenter 以动态设置 Content 属性，并在 ContentPresenter 附近创建您的 Image .此外，要排除多个 Style's，您可以使用 DataTrigger 更改 Image 的 Source。请看下面的例子:

<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
   <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
   <Setter Property="Background" Value="#ffffff"/>
   <Setter Property="BorderBrush" Value="#cccccc"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="Foreground" Value="#333333"/>
   <Setter Property="HorizontalContentAlignment" Value="Center"/>
   <Setter Property="VerticalContentAlignment" Value="Center"/>
   <Setter Property="Padding" Value="16,3,16,3"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type Button}">
            <Border Name="Chrome" Background="{TemplateBinding Background}"
               BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
               <StackPanel>
                  <TextBlock x:Name="txtBlck" Text="Update"/>
                  <Image x:Name="img">
                     <Image.Style>
                        <Style TargetType="{x:Type Image}">
                           <Style.Triggers>
                              <DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Update">                                                        
                                 <Setter Property="Source" Value="/SalesSolution;component/Images/update.png"/>
                              </DataTrigger>
                              <DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Save">
                                 <Setter Property="Source" Value="/SalesSolution;component/Images/save.png"/>
                              </DataTrigger>
                              <DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Delete">
                                 <Setter Property="Source" Value="/SalesSolution;component/Images/delete.png"/>
                              </DataTrigger>
                           </Style.Triggers>
                        </Style>
                     </Image.Style>
                  </Image>
                  <ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                    RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
               </StackPanel>
            </Border>
            <ControlTemplate.Triggers>                                
               <Trigger Property="IsEnabled" Value="false">
                  <Setter Property="Foreground" Value="#333333" />
               </Trigger>
               <Trigger Property="IsMouseOver" Value="True">
                  <Setter Property="Background" Value="#dddddd" />
                  <Setter Property="BorderBrush" Value="#cccccc" />
                  <Setter Property="Foreground" Value="#333333" />
               </Trigger>
               <Trigger Property="IsPressed" Value="True">
                  <Setter Property="Background" Value="#1ba1e2" />
                  <Setter Property="BorderBrush" Value="#1ba1e2"/>
                  <Setter Property="Foreground" Value="#ffffff"/>
               </Trigger>
               <Trigger Property="IsFocused" Value="true">
                  <Setter TargetName="Chrome" Property="BorderBrush" Value="#1ba1e2" />
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>