[英]WPF toggle panel visibility
I have two panels, only one should be visible at the same time.我有两个面板,只能同时看到一个。 I change between them by clicking a button, one on each panel.
我通过单击一个按钮在它们之间进行切换,每个面板上都有一个。
Is there a nice way to do this in xaml without codebehind or viewmodel?在没有代码隐藏或视图模型的 xaml 中有没有很好的方法来做到这一点?
It's actually possible, however quite tricky.这实际上是可能的,但非常棘手。
My example works without any code-behind, actually without any value converters, too.我的示例无需任何代码隐藏即可工作,实际上也无需任何值转换器。
Here is the code: (now simplified version, thanks to @HB for ideas)这是代码:(现在是简化版,感谢@HB的想法)
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="RBToggleButtonStyle" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ToggleButton
IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="25"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="15"/>
<Setter Property="Content" Value="Hide"/>
</Style>
<Style x:Key="MyBorderStyle" TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked}" Value="True">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Green" Grid.Column="0" Style="{StaticResource MyBorderStyle}" DataContext="{Binding ElementName=greenB}">
<RadioButton x:Name="greenB" GroupName="x" Style="{StaticResource RBToggleButtonStyle}"/>
</Border>
<Border Background="Red" Grid.Column="1" Style="{StaticResource MyBorderStyle}" DataContext="{Binding ElementName=redB}">
<RadioButton x:Name="redB" GroupName="x" Style="{StaticResource RBToggleButtonStyle}"/>
</Border>
</Grid>
</Page>
The idea of using ToggleButtons
is stolen from some other question at SO使用
ToggleButtons
的想法是从SO 的其他问题中偷来的
The suggestion with using a tabcontrol is good.使用 tabcontrol 的建议很好。 I found some code which styles a TabControl to only show the TabItem content
我发现了一些代码,其中 styles 一个 TabControl 只显示 TabItem 内容
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<TabControl BorderThickness="0" Padding="0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Not shown">
<Grid Background="Red"/>
</TabItem>
<TabItem>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab 2
</TextBlock>
</TabItem>
</TabControl>
</Grid>
</P
If you used ToggleButtons, then you could bind the visibility of Panel 1 to the IsChecked state of Button 2, and the visibility of Panel 2 to the IsChecked state of Button 1. Make them TwoWay bindings and use the built-in BooleanToVisibility converter.如果您使用了 ToggleButtons,那么您可以将面板 1 的可见性绑定到按钮 2 的 IsChecked state,并将面板 2 的可见性绑定到按钮 1 的 IsChecked state。使它们成为双向可见性转换器并使用内置的布尔值。
Why not use the TabControl for this?为什么不为此使用 TabControl?
A little work around with a IValueConverter
should do the trick.使用
IValueConverter
进行一些工作应该可以解决问题。 Sure it's not plain old XAML, but it's not in the codebehind and can be reuse.当然它不是普通的旧 XAML,但它不在代码隐藏中并且可以重用。
I see something like binding X visibility to Y visibility and add a Converter to it:我看到类似将 X 可见性绑定到 Y 可见性并向其添加转换器:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (Visibility)value == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
}
I don't think so.我不这么认为。 You would need to use viewmodel or codebehind.
您将需要使用视图模型或代码隐藏。 Use a Style with a DataTrigger and bind the value of the visibility property to a property in viewmodel, avoiding the use of codebehind.
使用带有 DataTrigger 的 Style 并将可见性属性的值绑定到 viewmodel 中的属性,避免使用代码隐藏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.