僅當在單選按鈕中選擇了兩個選項之一時才顯示StackPanel

我有一個 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面板應保持隱藏狀態。

uj5u.com熱心網友回復：

您可以添加自定義樣式DataTrigger：

• Visibility="Visible"從StackMode面板上取下。
• 添加Setter，設定的默認值Visibility的的StackPanel到Visible。
• 如果 的值為 ，則添加DataTrigger將其值設定為Collapsed(或Hidden) 的。您可以在系結中參考元素。IsCheckedrbtnChangetrueElementName

<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。您可以添加另一DataTrigger對IsChecked="False"的狀態rbtnChange RadioButton。

<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為默認，并添加觸發器，其它每個RadioButtons到組Visible，但對于更多的按鈕，這將很好地擴展。

標籤：C＃ 小白 xaml

上一篇：如何在WPF中更改資料網格標題樣式或元素樣式前景

下一篇：在WPF中創建閃亮的顏色