WPF - Custom Tab Control Binding - wpf

Question

I'm creating a custom tab control and the tabs were working fine, but when I click a button in my toolbar, the selected tab disappears.
How do I get the selected tab to remain Visible until the next tab is selected?
How do I bind the Visibility of the selected tab with the Visibility of it's corresponding toolbar and DataGrid? (Example: If I click on Tab2, I want Tab2Tools and dgTab2 to become Visible, and all other TabTools and DataGrids to be Hidden or Collapsed.
<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

You can bind the button click using Command property in your viewmodel and define a method using delegates. In your method you can set the visibility of datagrids as per the requirement.
Regarding your first query, I simply copied your code on my local and tried executing it, I do not see any tabs becoming invisible while the other one is selected.