Question

我有两个可以完美工作的按钮。我控制可见性： 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尝试：

           <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;
        }
    }

Answer 1

您可以使用两个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>

样式：

OnMouseDown

Answer 2

可以使用包含两个箭头的模板来设置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>

WPF ToggleButton，按钮样式

2 个答案: