Как скрыть родительский контроль при отображении дочернего контента? - PullRequest
0 голосов
/ 20 ноября 2018

Как я могу скрыть родителя TabControl, пока не будет нажата дочерняя на одной из его вкладок?Очевидно, мне нужно, чтобы ребенок был видимым, чтобы пользователь мог щелкнуть по нему.Единственное, что мне удалось до сих пор придумать, это что-то вроде хака ... Я показываю дополнительный дочерний элемент поверх TabControl, а затем скрываю его и показываю 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 s для простоты.

Как я могу улучшить эту ситуацию?Мне не нравится идея дублировать дочерний контент, чтобы сделать эту работу.У кого-нибудь есть лучшие решения?

1 Ответ

0 голосов
/ 20 ноября 2018

Вы можете, как упомянуто @XAMIMAX, скрыть TabControl, но не его Opacity (потому что установка его в 0 также будет скрывать дочерний элемент).Следующее 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 есть 2 триггера: установка для BorderBrush черного цвета, когда кто-то нажимает наTabControl и установите его на Transparent, когда MousePointer покидает TabControl.Эти два управляют видимостью самого TabControl.Примечание: Добавьте дополнительные Trigger s, если ваш Background отличается от Color за TabControl.

У TabItem есть Trigger, связанный с Color из TabControl Border.Если Color черный, покажите Header TabItem, в противном случае скройте их.

enter image description here

...