在页面上,我有3个垂直堆叠的扩展器 用户无需同时打开多个
为了节省屏幕空间,我想基本上是一个带标签的扩展器
扩展器将在一个扩展器中具有三个头部
我肯定希望保持扩展器看起来像用户当前习惯的那样
它的外观和行为与当前的扩展器完全相同
但是,不是三个标题行,而是一个
点击的标题将决定内容
因此,不是标题使用的三行 - 只有一行
因此,在三个标题和三个扩展箭头下面都将在顶行上
我会保存两排屏幕房地产
这就是我要找的:
但这不起作用 - 我只是破坏了边界
这三个只是扩展到他们的一栏
展开时,我希望expandar具有所有三列
有没有人这样做过?
答案 0 :(得分:1)
希望这个解决方法有所帮助。这个例子对我有用。
我用 Radiobutton 替换扩展器中的togglebutton .Radiobutton Groupname属性只允许一次“选中”一个选项(具有相同的组名)。
<Window.Resources>
<Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="True">
<DockPanel>
<RadioButton GroupName="a" x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<RadioButton.FocusVisualStyle>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="0" SnapsToDevicePixels="True" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RadioButton.FocusVisualStyle>
<RadioButton.Style>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RadioButton.Style>
</RadioButton>
<ContentPresenter x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Right">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
<Setter Property="Style" TargetName="HeaderSite">
<Setter.Value>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90"/>
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
<Setter Property="Style" TargetName="HeaderSite">
<Setter.Value>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="180"/>
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Left" Margin="4,0,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Left"/>
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>
<Setter Property="Style" TargetName="HeaderSite">
<Setter.Value>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="White" HorizontalAlignment="Center" Height="19" Stroke="#FF333333" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="False" Stroke="#FF333333" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="circle" Value="#FFF3F9FF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C77DD"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Fill" TargetName="circle" Value="#FFD9ECFF"/>
<Setter Property="Stroke" TargetName="arrow" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="circle" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="circle" Value="#FFE6E6E6"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
<Expander.Content>
<Grid Height="50" Background="Red"></Grid>
</Expander.Content>
</Expander>
<Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
<Expander.Content>
<Grid Height="50" Background="Green"></Grid>
</Expander.Content>
</Expander>
<Expander Header="hello" Style="{DynamicResource ExpanderStyle1}">
<Expander.Content>
<Grid Height="50" Background="Blue"></Grid>
</Expander.Content>
</Expander>
</StackPanel>
答案 1 :(得分:1)
为什么不使用带有TabItem标题的TabControl来模板化使用Expanders?您将获得TabControl的所有功能,但具有扩展器外观/标题项。
我做了一个快速测试以确保它能够正常运行,唯一的变化是将Expander.IsExpanded
绑定到TabItem.IsSelected
的反面,并设置Expander.IsHitTestVisible = false
以防止它被盗来自TabItem的点击。
<TabControl>
<TabItem >
<TabItem.Header>
<Expander Header="One" IsHitTestVisible="False"
IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
</TabItem.Header>
<Button Background="CornflowerBlue" />
</TabItem>
<TabItem>
<TabItem.Header>
<Expander Header="Two" IsHitTestVisible="False"
IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
</TabItem.Header>
<Button Background="Plum" />
</TabItem>
<TabItem>
<TabItem.Header>
<Expander Header="Three" IsHitTestVisible="False"
IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" />
</TabItem.Header>
<Button Background="Honeydew" />
</TabItem>
</TabControl>
我知道有很简单的方法可以让TabControl拉伸它的标题,如果这是一个要求,例如this solution。
答案 2 :(得分:0)
这只是一个强力解决方案。我不像标签那样包装标题。但是对于我需要它的3个。
<Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" x:Name="ExpTab">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Grid.RowSpan="2" BorderBrush="Orange" BorderThickness="4"/>
<Button Grid.Row="0" Grid.Column="0" Content="^" Click="btnOne"
Visibility="{Binding Path=VisBtnOne}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="One"
Visibility="{Binding Path=VisBtnOne}"/>
<Button Grid.Row="0" Grid.Column="2" Content="^" Click="btnTwo"
Visibility="{Binding Path=VisBtnTwo}"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="Two"
Visibility="{Binding Path=VisBtnTwo}"/>
<Button Grid.Row="0" Grid.Column="4" Content="^" Click="btnThree"
Visibility="{Binding Path=VisBtnThree}"/>
<TextBlock Grid.Row="0" Grid.Column="5" Text="Three"
Visibility="{Binding Path=VisBtnThree}"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="One" Visibility="{Binding Path=VisOne}" MaxHeight="20"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="two" Visibility="{Binding Path=VisTwo}" MaxHeight="20"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="6" Text="Three" Visibility="{Binding Path=VisThree}" MaxHeight="20"/>
</Grid>
using System.ComponentModel;
using System.Diagnostics;
namespace TabExapandar2
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
Debug.WriteLine("PageSearch NotifyPropertyChanged " + info);
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
public MainWindow()
{
InitializeComponent();
}
private Visibility visOne = Visibility.Collapsed;
private Visibility visTwo = Visibility.Collapsed;
private Visibility visThree = Visibility.Collapsed;
private Visibility visBtnOne = Visibility.Visible;
private Visibility visBtnTwo = Visibility.Visible;
private Visibility visBtnThree = Visibility.Visible;
private void NotifyVis()
{
NotifyPropertyChanged("VisOne");
NotifyPropertyChanged("VisTwo");
NotifyPropertyChanged("VisThree");
NotifyPropertyChanged("VisBtnOne");
NotifyPropertyChanged("VisBtnTwo");
NotifyPropertyChanged("VisBtnThree");
}
public Visibility VisOne
{
get { return visOne; }
set
{
if (visOne == value) return;
visOne = value;
if (value == System.Windows.Visibility.Visible)
{
//visOne = System.Windows.Visibility.Collapsed;
visTwo = System.Windows.Visibility.Collapsed;
visThree = System.Windows.Visibility.Collapsed;
visBtnOne = System.Windows.Visibility.Visible;
visBtnTwo = System.Windows.Visibility.Collapsed;
visBtnThree = System.Windows.Visibility.Collapsed;
}
else
{
visBtnOne = System.Windows.Visibility.Visible;
visBtnTwo = System.Windows.Visibility.Visible;
visBtnThree = System.Windows.Visibility.Visible;
}
NotifyVis();
}
}
public Visibility VisTwo
{
get { return visTwo; }
set
{
if (visTwo == value) return;
visTwo = value;
if(value == System.Windows.Visibility.Visible)
{
visOne = System.Windows.Visibility.Collapsed;
//visTwo = System.Windows.Visibility.Collapsed;
visThree = System.Windows.Visibility.Collapsed;
visBtnOne = System.Windows.Visibility.Collapsed;
visBtnTwo = System.Windows.Visibility.Visible;
visBtnThree = System.Windows.Visibility.Collapsed;
}
else
{
visBtnOne = System.Windows.Visibility.Visible;
visBtnTwo = System.Windows.Visibility.Visible;
visBtnThree = System.Windows.Visibility.Visible;
}
NotifyVis();
}
}
public Visibility VisThree
{
get { return visThree; }
set
{
if (visThree == value) return;
visThree = value;
if(value == System.Windows.Visibility.Visible)
{
visOne = System.Windows.Visibility.Collapsed;
visTwo = System.Windows.Visibility.Collapsed;
//visThree = System.Windows.Visibility.Collapsed;
visBtnOne = System.Windows.Visibility.Collapsed;
visBtnTwo = System.Windows.Visibility.Collapsed;
visBtnThree = System.Windows.Visibility.Visible;
}
else
{
visBtnOne = System.Windows.Visibility.Visible;
visBtnTwo = System.Windows.Visibility.Visible;
visBtnThree = System.Windows.Visibility.Visible;
}
NotifyVis();
}
}
public Visibility VisBtnOne
{
get { return visBtnOne; }
}
public Visibility VisBtnTwo
{
get { return visBtnTwo; }
}
public Visibility VisBtnThree
{
get { return visBtnThree; }
}
private void btnOne(object sender, RoutedEventArgs e)
{
if(VisOne == System.Windows.Visibility.Visible)
VisOne = System.Windows.Visibility.Collapsed;
else
VisOne = System.Windows.Visibility.Visible;
}
private void btnTwo(object sender, RoutedEventArgs e)
{
if(VisTwo == System.Windows.Visibility.Visible)
VisTwo = System.Windows.Visibility.Collapsed;
else
VisTwo = System.Windows.Visibility.Visible;
}
private void btnThree(object sender, RoutedEventArgs e)
{
if(VisThree == System.Windows.Visibility.Visible)
VisThree = System.Windows.Visibility.Collapsed;
else
VisThree = System.Windows.Visibility.Visible;
}
}
}