c# - ContentControl 在两个按钮之间切换

Question

我整晚都在为这个问题苦思冥想。我想要做的就是拥有一个内容控件，它可以根据 ViewModel 中的 bool 值在显示两个不同按钮之间切换。

基本上我有一个任务在后台运行，带有一个取消按钮。一旦你点击取消并且任务停止，取消按钮应该变成后退按钮。这是两个独立的按钮元素，而不只是更改单个按钮的属性。我正在使用 MahApps TransitioningContentControl，所以我希望能够使用转换。

如果这大部分都可以在 XAML 中完成，我会很惊讶。我真的不想为本应简单的事情添加一堆样板代码。

编辑:这是代码片段。没有太多，因为我只是删除了所有不起作用的东西。

<Controls:TransitioningContentControl x:Name="CancelBackButtonControl" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Height="80">
    <Canvas>
        <Button x:Name="CancelButton" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" IsCancel="True" Content="{StaticResource appbar_close}" BorderBrush="Black" Command="{Binding CancelCommand}"/>
        <Button x:Name="GoBackButton" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" IsCancel="True" Content="{StaticResource appbar_arrow_left}" BorderBrush="Black" Command="{Binding GoBackCommand}"/>
    </Canvas>
</Controls:TransitioningContentControl>

Answer 1

有很多方法可以实现这一点(这就是 WPF 的优点)；但是，在我个人看来，如果您只是使用派生自 ToggleButton 的控件，那么“违背原则”的工作就会减少。 ，例如 RadioButton ，特别是因为您希望它全部在 XAML 中完成。重要的是不要通过视觉来考虑任何控件，而要通过它们的功能来考虑。我用 RadioButton 做了一些不可思议的事情之前，所以这是我要展示的第一件事；但是，此答案的后半部分包含常规按钮方法。

以下是两种方法(RadioButton 和 Button)的完整示例，完全在 XAML 中完成:

预览:

代码:

<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="{x:Type RadioButton}" x:Key="FlatRadioButtonStyle">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Background" Value="#FF346FD6"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="5,2,5,3"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border Background="{TemplateBinding Background}"
                                Width="{TemplateBinding Width}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                            <ContentPresenter Content="{TemplateBinding Content}"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF6696E9"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <RadioButton x:Name="BackButton" Content="Back">
            <RadioButton.Style>
                <Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource FlatRadioButtonStyle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName=CancelButton}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RadioButton.Style>
        </RadioButton>
        <RadioButton x:Name="CancelButton" Content="Cancel" IsChecked="True">
            <RadioButton.Style>
                <Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource FlatRadioButtonStyle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, ElementName=BackButton}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </RadioButton.Style>
        </RadioButton>
    </Grid>
</Window>

大部分资源样式代码是视觉样式和模板，专注于使单选按钮看起来像常规按钮，因此不是很重要。我们将关注的领域是 Triggers .您会注意到，在资源样式中，我确保当 RadioButton被检查，它崩溃了。但是，在每个按钮的本地样式中，我确保当另一个 RadioButton被检查，它使当前 RadioButton可见的。这必须以本地方式完成，因为我们需要传递 ElementName进入Binding .所以，当 RadioButton被检查，它崩溃并使另一个RadioButton可见的。您还会注意到，我选中了我希望默认隐藏的按钮。显然，您可以使用绑定(bind)将其连接起来。

类似的方法可以应用于常规按钮:

预览:

代码:

<Window x:Class="Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">   
    <Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="ToggleButtonStyle">
            <Setter Property="Width" Value="100"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button x:Name="CancelButton" Content="Cancel">
            <Button.Style>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource ToggleButtonStyle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsFocused, ElementName=BackButton}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
        <Button x:Name="BackButton" Content="Back">
            <Button.Style>
                <Style TargetType="{x:Type Button}" BasedOn="{StaticResource ToggleButtonStyle}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsFocused, ElementName=CancelButton}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

在这里，而不是IsChecked ，我正在使用 IsFocused .您可以通过使用 EventTrigger 来完成类似的事情。和 Click事件...但是，还有更多工作要做。 IsPressed可能看起来像一个很好的候选人，但问题是一旦你按下按钮，另一个几乎会立即出现，那个将有IsPressed。设置为 true几乎是瞬间。因此，您最终会遇到这种循环行为，似乎什么都没有发生。请注意，我使用 Grid将这些按钮放在彼此的顶部，默认情况下我希望在顶部可见的按钮，这样我就不必担心默认可见性或焦点。但是，您可以使用任何其他面板，只需设置 Visibility您要隐藏的按钮默认为 Collapsed .

如果您不想使用多个控件(在本例中为两个按钮)，您也可以设置 Content基于条件的按钮属性 DataTrigger显示不同的文本。您只需要确保处理 Command适本地。