WPF-自定義選項卡控件綁定

Question

我正在創建一個自定義標簽控件，並且這些標簽工作正常，但是當我單擊工具欄中的按鈕時，所選標簽消失了。

1. 在選擇下一個選項卡之前，如何使所選選項卡保持可見狀態？

2. 如何將選定選項卡的可見性與其對應的工具欄和DataGrid的可見性綁定在一起？ （示例：如果我單擊Tab2，我希望Tab2Tools和dgTab2變得可見，而所有其他TabTools和DataGrid被隱藏或折疊。

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <Color x:Key="TabGradientTop">#FFFFFFFF</Color>
    <Color x:Key="TabGradientBottom">#FFC0CBE8</Color>
    <SolidColorBrush x:Key="TabBarText" Color="#FF353C66"/>
    <SolidColorBrush x:Key="TabBarTop" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="TabBarBottom" Color="#FFC0CBE8"/>
    <SolidColorBrush x:Key="TabBarBorder" Color="#FF8E96AC"/>
    <SolidColorBrush x:Key="TabMou5eOverColor" Color="#FFFFB700"/>

    <Style x:Key="TabStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle x:Name="TabNormal" Fill="Transparent"/>
                        <Rectangle x:Name="TabMou5eOver" Fill="{StaticResource TabBarBottom}"  Height="30" Stroke="{StaticResource TabMou5eOverColor}" StrokeThickness="1" RadiusY="4" RadiusX="4" Visibility="Hidden" />
                        <Rectangle x:Name="TabMou5eOver2" Fill="{StaticResource TabBarBorder}"  Height="1" VerticalAlignment="Bottom" Visibility="Hidden" />
                        <Rectangle x:Name="TabMou5ePressed" Fill="{StaticResource TabBarTop}" Height="30" Stroke="{StaticResource TabBarBorder}" RadiusY="4" RadiusX="4" Visibility="Hidden" />
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Visibility" TargetName="TabMou5eOver2" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="TabMou5eOver" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsDefaulted" Value="True">
                            <Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="InvisiStyle" TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Transparent">
                        <ContentPresenter/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <!--Gadients-->
    <StackPanel Orientation="Vertical">
        <Rectangle Height="46">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.25"/>
                    <GradientStop Color="{StaticResource TabGradientTop}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
        <Rectangle Height="87">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.45" />
                    <GradientStop Color="{StaticResource TabGradientTop}"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Height="1" Fill="{StaticResource TabBarBottom}" Opacity="0.5"/>
        <Rectangle Height="1" Fill="{StaticResource TabBarBottom}"/>
        <Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
    </StackPanel>
    <!--Tabs-->
    <Grid Margin="15,22,0,0">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
            <Button x:Name="cmdTab1" Content="Tab1" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" IsDefault="True"/>
            <Button x:Name="cmdTab2" Content="Tab2" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
            <Button x:Name="cmdTab3" Content="Tab3" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
            <Button x:Name="cmdTab4" Content="Tab4" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
        </StackPanel>
    </Grid>
    <!--Tool Bars-->
    <StackPanel x:Name="Tab1Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top">
        <StackPanel Orientation="Vertical">
            <Button x:Name="Tab1Login" Content="Login" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
            <Button x:Name="Tab1Request" Content="Request Password" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
            <Rectangle Fill="{StaticResource TabBarBorder}" Height="1"  Margin="5,5,5,0"/>
            <Rectangle Fill="{StaticResource TabBarTop}" Height="1"  Margin="5,0,5,5" Opacity="0.5"/>
            <Button x:Name="Tab1Exit" Content="Exit"  Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
        </StackPanel>
    </StackPanel>
    <StackPanel x:Name="Tab2Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
    <StackPanel x:Name="Tab3Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
    <StackPanel x:Name="Tab4Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
    <!--Data Grids-->
    <DataGrid x:Name="dgTab2" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
    <DataGrid x:Name="dgTab3" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
    <DataGrid x:Name="dgTab4" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
</Grid>

</Window>

Answer 1

您可以在視圖模型中使用Command屬性綁定按鈕單擊，並使用委托定義方法。 在您的方法中，您可以根據需要設置數據網格的可見性。

關於您的第一個查詢，我只是將您的代碼復制到本地並嘗試執行它，當選擇另一個選項卡時，我看不到任何選項卡變得不可見。