Lately I was creating a Silverlight application which handles the reservations of meeting rooms at work.

One of the requirements was a header with the hours displayed. I hear you think, not much of a problem for me but the difficult part was that the view had 2 headers. One that goes from 8 o’clock to 17 o’clock and the other one is for the whole day (from 0 to 24).

Above my gridview there is a checkbox which allows to users to switch to the 24 hour view. In the onchange event of the checkbox I was not able to search for my controls in my header. So I wasn’t able to make the first one hidden and the second one visible.

I tried a lot of things. One of those was creating the styling of my header in code behind and override the headerstyle parameter but that was without any luck.
Then I found a solution that doesn’t asks a lot of code but that is efficient.

The trick I use to make one visible and the other one hidden is using 2 textblock controls that are collapsed and contained the value ‘Visible’ or ‘Collapsed’.
In my control in my header I could bind my visibility parameter to the text of those controls. So I am able to change the text in the textblocks in code behind and that’s how I could create a dynamically changing header.

The xaml code looks like this now:

<TextBlock Name="headerNormal" Text="Visible" Visibility="Collapsed" />
<TextBlock Name="headerWhole" Text="Collapsed" Visibility="Collapsed" />

<data:DataGrid Height="478" HorizontalAlignment="Left" Margin="12,185,0,0" Name="dgResource" VerticalAlignment="Top" Width="976" AutoGenerateColumns="False" LoadingRow="dgResource_LoadingRow">
    <data:DataGrid.Columns>
        <data:DataGridTextColumn Width="100" Header="Name" IsReadOnly="True" Binding="{Binding Name}" />
        <data:DataGridTemplateColumn Width="876" Header="Reservation" IsReadOnly="True">
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Canvas Height="25" HorizontalAlignment="Left" Margin="0,0,0,0" Name="canvas1" VerticalAlignment="Top" Width="876"></Canvas>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
            <data:DataGridTemplateColumn.HeaderStyle>
                <Style xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
                    TargetType="dataprimitives:DataGridColumnHeader">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel>
                                    <Canvas x:Name="normal" Height="15" Visibility="{Binding Text, ElementName=headerNormal}">
                                        <TextBlock Text="8"></TextBlock>
                                        <TextBlock Text="9" Canvas.Left="96"></TextBlock>
                                        <TextBlock Text="10" Canvas.Left="190"></TextBlock>
                                        <TextBlock Text="11" Canvas.Left="284"></TextBlock>
                                        <TextBlock Text="12" Canvas.Left="378"></TextBlock>
                                        <TextBlock Text="13" Canvas.Left="472"></TextBlock>
                                        <TextBlock Text="14" Canvas.Left="566"></TextBlock>
                                        <TextBlock Text="15" Canvas.Left="662"></TextBlock>
                                        <TextBlock Text="16" Canvas.Left="758"></TextBlock>
                                        <TextBlock Text="17" Canvas.Left="850"></TextBlock>
                                    </Canvas>
                                    <Canvas x:Name="wholeDay" Height="15" Visibility="{Binding Text, ElementName=headerWhole}">
                                        <TextBlock Text="0"></TextBlock>
                                        <TextBlock Text="1" Canvas.Left="36"></TextBlock>
                                        <TextBlock Text="2" Canvas.Left="72"></TextBlock>
                                        <TextBlock Text="3" Canvas.Left="108"></TextBlock>
                                        <TextBlock Text="4" Canvas.Left="144"></TextBlock>
                                        <TextBlock Text="5" Canvas.Left="180"></TextBlock>
                                        <TextBlock Text="6" Canvas.Left="216"></TextBlock>
                                        <TextBlock Text="7" Canvas.Left="252"></TextBlock>
                                        <TextBlock Text="8" Canvas.Left="288"></TextBlock>
                                        <TextBlock Text="9" Canvas.Left="324"></TextBlock>
                                        <TextBlock Text="10" Canvas.Left="360"></TextBlock>
                                        <TextBlock Text="11" Canvas.Left="396"></TextBlock>
                                        <TextBlock Text="12" Canvas.Left="432"></TextBlock>
                                        <TextBlock Text="13" Canvas.Left="468"></TextBlock>
                                        <TextBlock Text="14" Canvas.Left="504"></TextBlock>
                                        <TextBlock Text="15" Canvas.Left="540"></TextBlock>
                                        <TextBlock Text="16" Canvas.Left="576"></TextBlock>
                                        <TextBlock Text="17" Canvas.Left="612"></TextBlock>
                                        <TextBlock Text="18" Canvas.Left="648"></TextBlock>
                                        <TextBlock Text="19" Canvas.Left="684"></TextBlock>
                                        <TextBlock Text="20" Canvas.Left="720"></TextBlock>
                                        <TextBlock Text="21" Canvas.Left="756"></TextBlock>
                                        <TextBlock Text="22" Canvas.Left="792"></TextBlock>
                                        <TextBlock Text="23" Canvas.Left="828"></TextBlock>
                                        <TextBlock Text="0" Canvas.Left="862"></TextBlock>
                                    </Canvas>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </data:DataGridTemplateColumn.HeaderStyle>
        </data:DataGridTemplateColumn>
    </data:DataGrid.Columns>
</data:DataGrid>

If you have a better solution please reply