Styling for Grid inside Another Grid

Question

I have a GridView(B) inside a GridView(A). The style for GridView-A is different from style for GridView-B, but the issue arises when my GridView-B inherits all the style from GridView-A.

I don't want that to happen.

Is their any way, I can achieve this in xaml only ?

Answer 1

Just Follow the follwoing steps and let me know if you have any problem with this. Out of these you meight be aware already. May be you miss something.

1) Add ResourceDictionary as style sheet.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:XYZApplication">
 <!-- Style 1-->
  <Style x:Key="GridStyle1" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="BlanchedAlmond"></Setter>
        <Setter Property="Margin" Value="1,1,1,1"></Setter>
    </Style>
<!-- Style 2-->
    <Style x:Key="GridStyle2" TargetType="{x:Type Grid}">
        <Setter Property="Background" Value="Aqua"></Setter>
        <Setter Property="Margin" Value="5,5,5,5"></Setter>
    </Style>
</ResourceDictionary>

2) Add resource file into your user control/window as follows...

<UserControl x:Class="XYZApplication.Views.Payment"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:XYZApplication.Views"
             mc:Ignorable="d">

 <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Style/Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
</UserControl>

3) Use those specific styles to designated grid inside the usercontrol/window

 <Grid Style="{StaticResource GridStyle1}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
       <Grid Grid.Column="1" Grid.Row="1"  Style="{StaticResource GridStyle2}" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
        <Label  Grid.Column="0" Grid.Row="0">Bank Name</Label>
            <Label  Grid.Column="1" Grid.Row="0">Branch</Label>
            <Label  Grid.Column="2" Grid.Row="0">Account holder</Label>
            <Label  Grid.Column="3" Grid.Row="0">Account Number</Label>
            <Label  Grid.Column="4" Grid.Row="0">Balance</Label>
            <Label  Grid.Column="0" Grid.Row="1">Bank of ...</Label>
            <Label  Grid.Column="1" Grid.Row="1">...Branch</Label>
            <Label  Grid.Column="2" Grid.Row="1">My Name</Label>
            <Label  Grid.Column="3" Grid.Row="1">Account Number 123</Label>
            <Label  Grid.Column="4" Grid.Row="1">1 billion</Label>
        </Grid>
    </Grid>

You can add these both styles in code behind also. Hope it helps!!!

Answer 2

You should explicitly define your style for both the gridviews. In WPF the child control inherits the properties of parent control, may be you have this issue. You might have defined style for gridviewA and not for gridviewB or you are using the same style for all gridviews. If you can share the code, i can tell you exactly what is the problem.