仅当在单选按钮中选择了两个选项之一时才显示 StackPanel

Question

我有一个 WPF 应用程序，其中一页显示两个带有单选按钮的堆栈面板。我想要它，以便第二个堆栈面板的可见性取决于是否选择了某些单选按钮。

<Grid Background="#F8FBFD">
    <StackPanel x:Name="StackType" HorizontalAlignment="Center" Orientation="Horizontal" Margin="0,93,0,428">
        <materialDesign:Card Padding="32" Margin="16">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Type</TextBlock>
                <RadioButton Checked="NewMode_Checked" Content="New " x:Name="rbtnNew" GroupName="InstallType" IsChecked="{Binding newMode, Mode=TwoWay, Source={StaticResource modes}}"/>
                <RadioButton  Checked="UpgradeMode_Checked" Content="Update" x:Name="rbtnUpgrade" GroupName="InstallType" IsChecked="{Binding upgradeMode, Mode=TwoWay, Source={StaticResource modes}}" />
                <RadioButton  Checked="ChangeMode_Checked" Content="Change" x:Name="rbtnChange" GroupName="InstallType" IsChecked="{Binding changeMode, Mode=TwoWay, Source={StaticResource modes}}" />
            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
    <StackPanel x:Name="StackMode" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Visibility="Visible">
        <materialDesign:Card Padding="32" Margin="16" Width="204" Height="147">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Mode</TextBlock>
                <RadioButton Content="Default Settings" Name="rbtnDefaultMode" IsChecked="{Binding defaultMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="defaultSettings_Checked"/>
                <RadioButton Content="Custom Settings" Name="rbtnCustomMode" IsChecked="{Binding customMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="customSettings_Checked"/>
            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
</Grid>

在此，我希望以某种方式拥有它，以便在选择 rbtnNew 或 rbtnUpgrade 时，只有这样 StackMode 面板才应该可见。如果选择 rbtnChange，面板 StackMode 面板应保持隐藏状态。

Answer 1

您可以添加自定义样式 DataTrigger:

从 StackMode 面板中删除 Visibility="Visible"。
添加一个 Setter，将 StackPanel 的 Visibility 的默认值设置为 Visible。
如果 rbtnChange 的 IsChecked 值为 true，则添加一个 DataTrigger，将其值设置为 Collapsed（或 Hidden） .您可以在绑定中引用带有 ElementName 的元素。

<Grid Background="#F8FBFD">
    <StackPanel x:Name="StackType" HorizontalAlignment="Center" Orientation="Horizontal" Margin="0,93,0,428">
        <materialDesign:Card Padding="32" Margin="16">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Type</TextBlock>
                <RadioButton Checked="NewMode_Checked" Content="New " x:Name="rbtnNew" GroupName="InstallType" IsChecked="{Binding newMode, Mode=TwoWay, Source={StaticResource modes}}"/>
                <RadioButton  Checked="UpgradeMode_Checked" Content="Update" x:Name="rbtnUpgrade" GroupName="InstallType" IsChecked="{Binding upgradeMode, Mode=TwoWay, Source={StaticResource modes}}" />
                <RadioButton  Checked="ChangeMode_Checked" Content="Change" x:Name="rbtnChange" GroupName="InstallType" IsChecked="{Binding changeMode, Mode=TwoWay, Source={StaticResource modes}}" />
            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
    <StackPanel x:Name="StackMode" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
        <materialDesign:Card Padding="32" Margin="16" Width="204" Height="147">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Mode</TextBlock>
                <RadioButton Content="Default Settings" Name="rbtnDefaultMode" IsChecked="{Binding defaultMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="defaultSettings_Checked"/>
                <RadioButton Content="Custom Settings" Name="rbtnCustomMode" IsChecked="{Binding customMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="customSettings_Checked"/>
            </StackPanel>
        </materialDesign:Card>
        <StackPanel.Style>
           <Style TargetType="{x:Type StackPanel}">
              <Setter Property="Visibility" Value="Visible"/>
              <Style.Triggers>
                 <DataTrigger Binding="{Binding IsChecked, ElementName=rbtnChange}" Value="True">
                    <Setter Property="Visibility" Value="Collapsed"/>
                 </DataTrigger>
              </Style.Triggers>
           </Style>
        </StackPanel.Style>
    </StackPanel>
</Grid>

另一种选择是使用内置的 BooleanToVisibilityConverter 转换器。

<Grid Background="#F8FBFD">
    <Grid.Resources>
       <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Grid.Resources>
    <StackPanel x:Name="StackType" HorizontalAlignment="Center" Orientation="Horizontal" Margin="0,93,0,428">
        <materialDesign:Card Padding="32" Margin="16">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Type</TextBlock>
                <RadioButton Checked="NewMode_Checked" Content="New " x:Name="rbtnNew" GroupName="InstallType" IsChecked="{Binding newMode, Mode=TwoWay, Source={StaticResource modes}}"/>
                <RadioButton  Checked="UpgradeMode_Checked" Content="Update" x:Name="rbtnUpgrade" GroupName="InstallType" IsChecked="{Binding upgradeMode, Mode=TwoWay, Source={StaticResource modes}}" />
                <RadioButton  Checked="ChangeMode_Checked" Content="Change" x:Name="rbtnChange" GroupName="InstallType" IsChecked="{Binding changeMode, Mode=TwoWay, Source={StaticResource modes}}" />
            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
    <StackPanel x:Name="StackMode" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Visibility="{Binding IsChecked, ElementName=rbtnChange, Converter={StaticResource BooleanToVisibilityConverter}}">
        <materialDesign:Card Padding="32" Margin="16" Width="204" Height="147">
            <StackPanel>
                <TextBlock HorizontalAlignment="Left" Style="{DynamicResource MaterialDesignTitleTextBlock}" >Installation Mode</TextBlock>
                <RadioButton Content="Default Settings" Name="rbtnDefaultMode" IsChecked="{Binding defaultMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="defaultSettings_Checked"/>
                <RadioButton Content="Custom Settings" Name="rbtnCustomMode" IsChecked="{Binding customMode, Source={StaticResource modes}, Mode=TwoWay}" Checked="customSettings_Checked"/>
            </StackPanel>
        </materialDesign:Card>
    </StackPanel>
</Grid>

关于初始状态应为 Collapsed 的评论更新。您可以为 rbtnChange RadioButton.

的 IsChecked="False" 状态添加另一个 DataTrigger

<Style TargetType="{x:Type StackPanel}">
   <Setter Property="Visibility" Value="Visible"/>
   <Style.Triggers>
      <DataTrigger Binding="{Binding IsChecked, ElementName=rbtnChange}" Value="False">
         <Setter Property="Visibility" Value="Collapsed"/>
      </DataTrigger>
      <DataTrigger Binding="{Binding IsChecked, ElementName=rbtnChange}" Value="True">
         <Setter Property="Visibility" Value="Visible"/>
      </DataTrigger>
   </Style.Triggers>
</Style>

当然，您也可以“反转” 样式，将 Collapsed 设置为默认样式并为每个其他 RadioButton 添加触发器设置 Visible，但对于更多按钮，这将无法很好地缩放。

仅当在单选按钮中选择了两个选项之一时才显示 StackPanel

Display a StackPanel only if one of two options are selected in a radio button

c#

wpf

xaml