DataGrid Sample from Mix08

  • Article

I've been asked by a few folks to post the DataGrid sample I showed in my Mix08 talk. This uses the same backend and data source as the Mix08 sample below but uses a DataGrid rather than an ItemsControl for the UI. There was a bit of XAML required in order to get the DataGrid to do the masters view - this was provided to me Scott Morrison, the DataGrid Program Manager. The XAML required to do the formatting is (assumes you’ve mapped the System.Windows.Controls.Data assembly to an XML namespace identified as “data”):

<data:DataGrid x:Name="results" RowHeight="60" IsReadOnly="True" Width="800" Margin="14"

RowBackground="#99FFFFFF" AlternatingRowBackground="#66FFFFFF"

HeadersVisibility="None" GridlinesVisibility="Horizontal"

RowDetailsVisibility="VisibleWhenSelected" SelectionMode="SingleFullRow">

<data:DataGrid.Columns>

<data:DataGridTemplateColumn Width="80">

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Border CornerRadius="5" BorderThickness="1" Margin="5" BorderBrush="DarkGray" Background="Black">

<Image Source="{Binding ImageUrl}" Stretch="UniformToFill" Margin="1"/>

</Border>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTextBoxColumn DisplayMemberBinding="{Binding Title}" FontSize="20" FontWeight="Bold" Width="527"/>

<data:DataGridTemplateColumn Width="165">

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<StackPanel VerticalAlignment="Center">

<TextBlock Text="Source" Foreground="#666666" FontWeight="Bold" FontFamily="Trebuchet MS" FontSize="14"/>

<TextBlock Text="{Binding Source}" FontFamily="Trebuchet MS" FontSize="14"/>

</StackPanel>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

<data:DataGrid.RowDetailsTemplate>

<DataTemplate>

<!-- MouseLeave -->

<Grid Margin="5,5,5,0" Background="Transparent">

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="10" />

</Grid.RowDefinitions>

<StackPanel>

<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="5" FontFamily="Trebuchet MS" FontSize="16"/>

<TextBlock Text="Posted On:" Foreground="#666666" Margin="5,5,5,0" FontFamily="Trebuchet MS" FontSize="14" FontWeight="Bold"/>

<TextBlock Text="{Binding PublishDate}" Margin="5,0,5,5" FontFamily="Trebuchet MS" FontSize="14"/>

<TextBlock Text="View Count:" Foreground="#666666" Margin="5,5,5,0" FontFamily="Trebuchet MS" FontSize="14" FontWeight="Bold"/>

<TextBlock Text="{Binding ViewCount}" Margin="5,0,5,5" FontFamily="Trebuchet MS" FontSize="14"/>

</StackPanel>

<Border Grid.Column="1" Height="330" Width="440" CornerRadius="5" BorderThickness="1" Margin="5" BorderBrush="DarkGray" Background="Black" VerticalAlignment="Top">

<Grid>

<MediaElement Margin="2" Source="{Binding VideoUrl}" AutoPlay="True"/>

<Button Content="Play" Width="50" Height="50" Margin="0,0,0,35" Opacity="0"/>

</Grid>

</Border>

</Grid>

</DataTemplate>

</data:DataGrid.RowDetailsTemplate>

</data:DataGrid>

The application output is nothing more than a Deep Zoom version of the poster:

Formatted DataGrid