WPF ToggleButton，按钮样式答案

【问题标题】：WPF ToggleButton, Button stylingWPF ToggleButton，按钮样式
【发布时间】：2018-08-16 13:27:00
【问题描述】：

我有两个可以完美运行的按钮。我控制可见性： 1. 一个按钮消失，被另一个按钮代替。 2. 图像是指向左或右的箭头。 2. 颜色边框会发生应有的变化。

这行得通，但感觉很笨拙。我认为这应该使用 ToggleButton 来完成，但我无法让 ToggleButton 正常工作。

工作按钮：

            <Button Name="ActiveJobGridButtonRight" Grid.Row="1" Grid.Column="2"  
                    Command="{Binding JobGridListViewVisibility}" 
                    Style="{DynamicResource GraphicIconStyle}" IsEnabled="True"
                    Visibility="{Binding JobViewGridVisible, Converter={StaticResource ReverseBooleanToVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}"
                    ToolTip="Expand Jobs List">
                <Image Source="/Graphics/arrow_right24.png"  Width="24" Height="24" Margin="0"></Image>
            </Button>


            <Button Name="ActiveJobGridButtonLeft" Grid.Row="1" Grid.Column="2"  
                    Command="{Binding JobGridListViewVisibility}" 
                    Style="{DynamicResource GraphicIconStyle}" IsEnabled="True"
                    Visibility="{Binding JobViewGridVisible, Converter={StaticResource booleanToVisibility}, UpdateSourceTrigger=PropertyChanged}"
                    ToolTip="Collapse Jobs List">
                <Border BorderBrush="{Binding Path=JobViewGridVisible, Converter={StaticResource SecurityAccessBrushColorConverter}}"
                        BorderThickness="2" CornerRadius="4">
                    <Image Source="/Graphics/arrow_left24.png"  Width="24" Height="24" Margin="0"></Image>
                </Border>

            </Button>

我的切换按钮尝试：

           <ToggleButton x:Name="EmployeeListViewExpansionToggleButton" Grid.Row="1" Grid.Column="2" Width="28" Height="28"
                          Background="Transparent" BorderThickness="0">

                    <Border BorderBrush="{Binding ElementName=EmployeeListViewExpansionToggleButton, Path=IsChecked, Converter={StaticResource SecurityAccessBrushColorConverter}}"
                            BorderThickness="2" CornerRadius="4" Background="Transparent">

                        <Image Source="/Graphics/arrow_right24.png" Width="24" Height="24"  Margin="0" RenderTransformOrigin="0.5,0.5">
                            <Image.RenderTransform>
                                <ScaleTransform ScaleX="{Binding ElementName=EmployeeListViewExpansionToggleButton, Path=IsChecked, Converter={StaticResource BooleanToRotationConverter}}"/>
                            </Image.RenderTransform>
                        </Image>
                    </Border>

            </ToggleButton>

转换器：

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var b = (bool)value;
        if (b)
        {
            return -1;
        }
        else
        {
            return 1;
        }
    }

【问题讨论】：

标签： wpf button togglebutton

【解决方案1】：

可以使用包含两个箭头的模板来设置 ToggleButton 的样式，并根据切换状态使它们可见或不可见。

<Style x:Key="ArrowToggleStyle" TargetType="ToggleButton">
    <Setter Property="Background" Value="Gray"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Background="{TemplateBinding Background}">
                    <Grid>
                        <Image x:Name="leftArrowImg" Source="/Graphics/arrow_left24.png" Width="24" Height="24"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Image x:Name="rightArrowImg" Source="/Graphics/arrow_right24.png" Width="24" Height="24"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="content1" Content="not selected" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="content2" Content="SELECTED" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="DimGray"/>
                        <Setter TargetName="leftArrowImg" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="rightArrowImg" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="content1" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="content2" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter TargetName="leftArrowImg" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="rightArrowImg" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="content1" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="content2" Property="Visibility" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

谢谢。这比我想象的更灵活，我现在对 TemplateBinding 的工作原理有了更好的理解。隐藏/可见逻辑对图像不正确，但很容易修复。我添加了我现在需要的动态边框，因为我了解了 TemplateBinding 的用途......谢谢！
不客气。我修复了图像可见性逻辑...复制和粘贴错误。

【解决方案2】：

您可以使用两个RadioButton 元素并定义一个Style，它会根据当前是否已检查来更改RadioButton 的模板，例如：

<RadioButton x:Name="left" GroupName="g1" Style="{StaticResource ToggleButtonStyle}" />
<RadioButton x:Name="right" GroupName="g1" Style="{StaticResource ToggleButtonStyle}" />

风格：

<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border Background="Red">
                    <!-- define your not selected template here...-->
                    <TextBlock Text="Not selected" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Background="Green">
                            <!-- define your selected template here...-->
                            <TextBlock Text="Selected" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

【讨论】：