grids Visibility binded to a TabControl SelectedItem

Question

I have two grids contained in borders like this :

                    <Border BorderBrush="Gray" BorderThickness="2" Margin="5" Visibility="{Binding SelectedItem, ElementName=tcAction, Converter={StaticResource LoadChangeHeaderToVisibilityConverter}}">
                    <Grid x:Name="actionGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text=" Card Name" HorizontalAlignment="Center" Margin="0,4,0,0" FontSize="16"/>
                        <Label Grid.Row="1" Content="{Binding CardName}" FontSize="14"  HorizontalAlignment="Center" />
                        <TextBlock Grid.Row="2" Text="{Binding ActionType, StringFormat='Action Type: {0}'}" Margin="4" FontSize="13" FontWeight="ExtraBlack"  HorizontalAlignment="Center"/>
                        <TextBlock Grid.Row="3" Text="{Binding Action, StringFormat='Action: {0}'}"  Margin="4" FontSize="13" FontWeight="ExtraBlack"  HorizontalAlignment="Center"/>
                    </Grid>
                </Border>
                <Border BorderBrush="Gray" BorderThickness="2" Margin="5" Visibility="{Binding SelectedItem, ElementName=tcAction, Converter={StaticResource LoadChangeHeaderToVisibilityConverter}}">
                    <Grid x:Name="actionCANGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text=" CAN Name" HorizontalAlignment="Center" Margin="0,4,0,0" FontSize="16"/>
                        <Label Grid.Row="1" Content="{Binding CardName}" FontSize="14"  HorizontalAlignment="Center" />
                        <TextBlock Grid.Row="2" Text="{Binding ActionType, StringFormat='Action Type: {0}'}" Margin="4" FontSize="13" FontWeight="ExtraBlack"  HorizontalAlignment="Center"/>
                        <TextBlock Grid.Row="3" Text="{Binding Action, StringFormat='Action: {0}'}"  Margin="4" FontSize="13" FontWeight="ExtraBlack"  HorizontalAlignment="Center"/>
                    </Grid>
                </Border>

Both of them are binded to the SelectedItem property of a TabControl. The fact here is that i want only one grid visible at a time, depending on the TabItem selected. So when Visibility is Visible for one of them, it should be Hidden for others. I am not sure how can i track the states of all the future grids, and keep only 1 in the front.

Answer 1

Personally I wouldn't mess with Visibility at all. That's the old WinForms way :)

Instead, I'd use a ContentControl and switch the ContentTemplate property in a DataTrigger based on the SelectedItem . I find this easier to maintain, and there's only one set of items in the visual tree at a time.

<Style TargetType="{x:Type ContentControl}">
    <Setter Property="ContentTemplate" Value="{StaticResource DefaultTemplate}" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=MyTabControl, Path=SelectedIndex}" Value="0">
            <Setter Property="ContentTemplate" Value="{StaticResource ActionTemplate}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding ElementName=MyTabControl, Path=SelectedIndex}" Value="1">
            <Setter Property="ContentTemplate" Value="{StaticResource ActionCANTemplate}" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Answer 2

Instead of binding the SelectedItem of the tabcontrol, Bind SelectedIndex and pass the convertParamereter to the Converter

Your Converter will be like below

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((int)value == (int)parameter)
        {
            return Visibility.Visible;
        }
        return Visibility.Collapsed;
    }

And in your Xmal change the visibility as below

Visibility="{Binding SelectedIndex, ElementName=tcAction, Converter={StaticResource LoadChangeHeaderToVisibilityConverter}, ConverterParameter=0}">