Share via

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

Comments

  • Anonymous
    March 11, 2008
    PingBack from http://blogs.msdn.com/jstegman/archive/2008/03/11/datagrid-sample-from-mix08.aspx

  • Anonymous
    March 11, 2008
    Adam Kinney posted an aggregation of links to great SL2 postings, Celso and Kirupa posted their WPF app

  • Anonymous
    March 12, 2008
    Sharepoint SharePoint Slipstreams recently announced [Via: slennon ] WPF Usability Design For Forms:...

  • Anonymous
    March 17, 2008
    Depuis la mise a disponibilité de Silverlight 2 au Mix08 il y a eu beaucoup d'articles, de blogs sur