代码之家 › 专栏 › 技术社区 › Sheridan

如何在显示子内容时隐藏父控件?

children parent visibility wpf

Sheridan · 技术社区 · 6 年前

我怎样才能隐藏父母 TabControl 直到单击其中一个选项卡中的子项?显然,我需要让孩子可见,以便用户能够点击它。到目前为止,我唯一能想到的是一个有点黑客…我将在 选项卡控件 然后藏起来展示 选项卡控件 点击后。这是我的黑客:

XAML:

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="500" Width="600" 
        PreviewMouseLeftButtonUp="Grid_PreviewMouseLeftButtonUp">
    <Window.Resources>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="300" />
            <Setter Property="Height" Value="250" />
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl Name="TabControl" Width="350" Height="300">
            <TabItem Header="Original">
                <Rectangle Fill="Red" />
            </TabItem>
            <TabItem Header="Modified">
                <Rectangle Fill="Blue" />
            </TabItem>
            <TabControl.Style>
                <Style TargetType="{x:Type TabControl}">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsTabControlVisible}" 
                            Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TabControl.Style>
        </TabControl>
        <Rectangle Fill="Red" Margin="0,22,0,0"
            PreviewMouseLeftButtonUp="Rectangle_PreviewMouseLeftButtonUp">
            <Rectangle.Style>
                <Style TargetType="{x:Type Rectangle}" 
                    BasedOn="{StaticResource {x:Type Rectangle}}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsTabControlVisible}" 
                            Value="True">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Rectangle.Style>
        </Rectangle>
    </Grid>
</Window>

代码落后:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public static readonly DependencyProperty IsTabControlVisibleProperty = 
            DependencyProperty.Register(nameof(IsTabControlVisible), typeof(bool), 
            typeof(MainWindow), null);

        public bool IsTabControlVisible
        {
            get { return (bool)GetValue(IsTabControlVisibleProperty); }
            set { SetValue(IsTabControlVisibleProperty, value); }
        }

        private void Rectangle_PreviewMouseLeftButtonUp(object sender, 
            MouseButtonEventArgs e)
        {
            IsTabControlVisible = true;
        }

        private void Grid_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (!TabControl.IsMouseOver) IsTabControlVisible = false;
        }
    }
}

我把内容改得很简单 Rectangle 为了简单。

我怎样才能改善这种情况?我不喜欢复制孩子的内容来完成这项工作。有人有更好的解决方案吗?

1 回复 | 直到 6 年前

LittleBit 6 年前

正如@xamimax所提到的,您可以隐藏 tabcontrol 但不能通过其 opacity (因为将其设置为0也会隐藏该子级)。通过隐藏除子元素之外的所有元素,以下 xaml 只是概念的快速和肮脏证明:


   
    
     
      
       
        <tabControl name=“tabControl”width=“350”height=“300”borderBrush=“transparent”>
&!--TabControl的内容-->
<tabItem header=“original”>
<rectangle fill=“red”/>
</tabitem>
<tabItem header=“modified”>
<rectangle fill=“蓝色”/>
</tabitem>

&!--TabControl的触发器-->
<tabcontrol.triggers>
&!--单击选项卡时将borderbrush设置为黑色-->
<eventTrigger routedevent=“mousedown”>
<eventTrigger.actions>
<BeginStoryboard>
<故事板>
<objectnimationusingkeyframes Storyboard.targetProperty=“(borderBrush)。(solidColorBrush.color)”>
<DiscreteObjectKeyframe keytime=“00:00:00”value=“x:静态颜色。黑色”/>gt;
</objectnimationusingkeyframes>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<!--鼠标离开TabControl时重置BorderBrush(选择要隐藏选项卡的Wathever条件)-->
<eventTrigger routedevent=“mouseLeave”>
<eventTrigger.actions>
<BeginStoryboard>
<故事板>
<objectnimationusingkeyframes Storyboard.targetProperty=“(borderBrush)。(solidColorBrush.color)”>
<DiscreteObjectKeyframe keytime=“00:00:00”value=“x:静态颜色。透明”/>gt;
</objectnimationusingkeyframes>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</tabcontrol.triggers>

&!--设置容器的“样式”->
<tabcontrol.itemcontainerstyle>
<style targettype=“x:type tabitem”>
&!--隐藏标题-->
<setter property=“visibility”value=“hidden”/>
&!--父级边框为黑色时显示标题(如果愿意,可以选择其他属性)--gt;
<style.triggers>
<dataTrigger binding=“binding relativesource=relativesource ancestortype=x:type tabcontrol,path=(borderbrush)。(solidcolorbrush.color)”value=“black”>
<setter property=“visibility”value=“visible”/>
</datatrigger>
</style.triggers>
&风格/风格;
</tabcontrol.itemcontainerstyle>
</TabControl>
< /代码> 

TabControl有两个触发器:当有人单击TabControl时,将BorderBrush设置为黑色,并将其设置为TransparentWhen the MousePointer leaves theTabControl。这两个处理tabcontrol本身的可见性。注意:如果您的background与colorbehind thetabcontrol


tabItem有一个trigger绑定到color的tabControlborder。如果coloris black,则显示headerof thetabitemotherwise,hide them.



)以下XAML只是通过隐藏除子元素以外的所有元素来快速和肮脏地证明概念:

<TabControl Name="TabControl" Width="350" Height="300" BorderBrush="Transparent">
    <!-- Content of the Tabcontrol -->
    <TabItem Header="Original">
        <Rectangle Fill="Red" />
    </TabItem>
    <TabItem Header="Modified" >
        <Rectangle Fill="Blue" />
    </TabItem>

    <!-- Triggers for the TabControl -->
    <TabControl.Triggers>
        <!-- Set Borderbrush to Black when tab is clicked -->
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Colors.Black}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <!-- Reset BorderBrush when Mouse leaves the TabControl (choose wathever condition you like to hide the tabs) -->
        <EventTrigger RoutedEvent="MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Colors.Transparent}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </TabControl.Triggers>

    <!-- Set "Style" of Container -->
    <TabControl.ItemContainerStyle>
        <Style TargetType="{x:Type TabItem}">
            <!-- Hide Header -->
            <Setter Property="Visibility" Value="Hidden"/>
            <!-- Show header when Border of parent is Black (you can choose a different Property if you like) -->
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabControl}}, Path=(BorderBrush).(SolidColorBrush.Color)}" Value="Black">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>


TabControl有两个触发器:设置BorderBrush当有人点击选项卡控件并将其设置为Transparent当鼠标指针离开选项卡控件. 这两个处理的是选项卡控件本身。注意:添加其他Trigger如果你的Background不同于Color在选项卡控件.

这个TabItem有一个触发绑定到颜色的选项卡控件Border. 如果颜色是黑色的,显示Header的标签项目否则,把它们藏起来。