Question

基本上我有两个并排的按钮，我已经定义了两套样式。出于说明目的，styleA为白色，styleB为黑色。这个想法应该有点简单，当用户点击buttonA时，它将应用styleA，其颜色为白色，buttonB将应用styleB并变为黑色，反之亦然。然而，经过数小时的研究，没有简单的方法来实现这一目标？有些人建议使用RelativeSource AncestorType而有些则使用Converter。我完全偏离轨道，因为我相信我的目标应该能够轻松完成。请帮忙，因为我是WPF专区的新手

Answer 1

我认为最简单的方法是使用带有styleA的RadioButtons和一个触发器，如果选中它将获得styleB。通过这种方式，您可以“免费”获得当您单击其中一个按钮时，它将获得styleB而另一个按钮将返回到styleA。

Answer 2

您可以做的是在资源字典中定义两种样式，然后在按钮的单击处理程序或单选按钮的选定项中，动态查找相关资源，并将找到的资源（样式）应用于你要重新设计的元素。

Answer 3

一种简单的方法是只制作一种风格并使用触发器

<Style
  TargetType="{x:Type Button}">
  <Setter Property="Background" Value="#C0C0C0"/>
  <Setter Property="BorderBrush" Value="#404040"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="Padding" Value="2"/>
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="MinHeight" Value="23"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate
        TargetType="{x:Type Button}">
        <Border
          x:Name="Border"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          CornerRadius="2">
          <ContentPresenter
            HorizontalAlignment="Center"
            Margin="{TemplateBinding Padding}"
            VerticalAlignment="Center"
            RecognizesAccessKey="True"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="#808080"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="#606060"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

希望有所帮助

<Button
  Width="100"
  HorizontalAlignment="Center"
  VerticalAlignment="Center"
  Content="Click Me"/>

修改

使用转换器的更好解决方案

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal"> <StackPanel.Resources> <wpfApplication2:MouseOverToBackgroundConverter x:Key="MouseOverToBackgroundConverter" NormalBackground="LightGreen" SelfMouseOverBackground="Red" MouseOverBackground="Firebrick" /> <Style x:Key="styleWithTrigger" TargetType="Rectangle"> <Setter Property="Fill" Value="LightGreen" /> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill" Value="Red" /> </Trigger> </Style.Triggers> </Style> </StackPanel.Resources> <Rectangle Width="100" Height="100" Margin="5" Style="{StaticResource styleWithTrigger}"> <Rectangle.Fill> <MultiBinding Converter="{StaticResource MouseOverToBackgroundConverter}"> <Binding RelativeSource="{RelativeSource Self}" Path="IsMouseOver" Mode="OneWay" /> <Binding ElementName="theOtherRect" Path="IsMouseOver" Mode="OneWay" /> </MultiBinding> </Rectangle.Fill> </Rectangle> <Rectangle x:Name="theOtherRect" Width="100" Height="100" Margin="5" Style="{StaticResource styleWithTrigger}" /> </StackPanel>

转换器

public class MouseOverToBackgroundConverter : IMultiValueConverter { public Brush NormalBackground { get; set; } public Brush SelfMouseOverBackground { get; set; } public Brush MouseOverBackground { get; set; } public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { if (values[0] is bool && values[1] is bool) { var selfIsMouseOver = (bool)values[0]; var otherIsMouseOver = (bool)values[1]; if (selfIsMouseOver) { return this.SelfMouseOverBackground; } return otherIsMouseOver ? this.MouseOverBackground : this.NormalBackground; } return this.NormalBackground; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { return targetTypes.Select(t => DependencyProperty.UnsetValue).ToArray(); } }

WPF推荐切换按钮样式的方法

3 个答案: