show grid in expander. - wpf

Question

I m trying to create the expander with the header on right side and than add a grid to that exapnder. when i run this grids textblock doesnt apper. And like to know what are best way to create expander header on right side.
<StackPanel >
<Expander Header="Customer Detail" IsExpanded="False" Style="{StaticResource MainViewExpander}" >
<Expander.Content>
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="ImageInformation" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.8*"/>
<ColumnDefinition Width="1.4*"/>
<ColumnDefinition Width="2.8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.7*" />
</Grid.RowDefinitions>
<Image Source="{Binding XPath=x.null}" Grid.Column="0" Grid.RowSpan="3"/>
<TextBlock Name="Customername"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="Customer Name"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
TextWrapping="NoWrap" Margin="0,0,0,13" Width="140" Height="22"/>
<TextBlock Name="Born"
Grid.Column="1"
Grid.Row="1"
Text="Born"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="BornDetail"
Grid.Column="2"
Grid.Row="1"
Text="BornDetail"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" />
<TextBlock Name="Speak"
Grid.Column="1"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="SpeakDetail"
Grid.Column="2"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" Height="16" MaxHeight="20" MaxWidth="135"/>
</Grid>
<Grid Height="150" Width="295">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" ></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="" Grid.Column="0" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="3" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="3" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>
My stylesheet is something like this:
<UserControl.Resources >
<!-- Main Expander Header Brushes -->
<SolidColorBrush x:Key="MainExpanderHeaderBackgroundBrush" Color="#FF3771C1"/>
<SolidColorBrush x:Key="MainExpanderHeaderBorderBrush" Color="Black"/>
<!-- Main Expander Content Brushes -->
<SolidColorBrush x:Key="MainExpanderContentBorderBrush" Color="Black" />
<!-- Main Expander Control Brushes (affect the whole control, not just header or content -->
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="White" />
<SolidColorBrush x:Key="MainExpanderControlDisabledForegroundBrush" Color="DarkGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBackgroundBrush" Color="LightGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBorderBrush" Color="LightGray" />
<!-- Main Expander Toggle Button Brushes -->
<SolidColorBrush x:Key="ExpanderToggleButtonBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="ExpanderToggleButtonMouseOverFillBrush" Color="Green" />
<SolidColorBrush x:Key="ExpanderToggleButtonPressedFillBrush" Color="Yellow" />
<!-- Expander Toggle Button Template -->
<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
<!-- Note, the chevron toggle button gets its forground color from the templated parent.
The parent must set this to a valid color when it is disabled. -->
<Path
Name="Chevron"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 10 10 L 20 0 Z"
Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="Chevron" Property="Data" Value="M 0 10 L 10 0 L 20 10 Z" />
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonMouseOverFillBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonPressedFillBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MainViewExpander" TargetType="Expander">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlNormalForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow"/>
</Grid.RowDefinitions>
<Border
Name="HeaderBorder"
Grid.Row="0"
BorderThickness="1"
CornerRadius="0,0,0,0"
BorderBrush="{StaticResource MainExpanderHeaderBorderBrush}"
Background="{StaticResource MainExpanderHeaderBackgroundBrush}"
>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0"
Margin="4"
ContentSource="Header"
RecognizesAccessKey="True"
/>
<ToggleButton
Grid.Column="1"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource ExpanderToggleButton}"
Background="{StaticResource ExpanderToggleButtonBackgroundBrush}"
/>
</Grid>
</Border>
<Border
Name="ContentBorder"
Grid.Row="1"
BorderBrush="{StaticResource MainExpanderContentBorderBrush}"
BorderThickness="1,0,1,1"
CornerRadius="0,0,0,0"
>
<ContentPresenter Margin="4" />
</Border>
</Grid>
<!-- Triggers for the entire Expander Control -->
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlDisabledForegroundBrush}"/>
<Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource MainExpanderControlDisabledBackgroundBrush}" />
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
<Setter TargetName="ContentBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="{StaticResource MainExpanderControlNormalForegroundBrush}"
FontSize="18"
FontWeight="Bold"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainViewExpanderCommands"
BasedOn="{StaticResource MainViewExpander}"
TargetType="Expander"
>
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</UserControl.Resources >
so how to get the data of grid in expander?

Answer 1

There are three problems
The MainExpanderControlNormalForegroundBrush was White, so nothing was visible in the expander content area. Change it to black as shown below.
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="Black" />
In one of the triggers you are binding to an element with nameContent which is not there. You should be binding to ContentBorder as shown below.
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=ContentBorder, Path=DesiredHeight}" />
</Trigger>
Set your ContentRow Height to 0 to bring the expander functionality.
<RowDefinition Name="ContentRow" Height="0"/>