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