Submit My Question - Recent Questions - Recent Answer
Msdn Tech >> Visual Studio Orcas >> Windows Presentation Foundation (WPF)

WPF Grid Row/ Column adding Item Template

Hi,

I am working on a small project trying to get to know WPF. I created a XML File That contains information About my Item. I have a Description and Image as well. The following code displays what my grid looks like.

Code Snippet

<Border
BorderBrush="Black"
BorderThickness="4"
CornerRadius="5"
Margin="6"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Mode=OneWay, XPath=ItemLookupCode}" Grid.Row="0"/>
<TextBlock Text="{Binding Mode=OneWay, XPath=Description}" Grid.Row="1"/>
<Image Source="{Binding Mode=OneWay, XPath=Image}" Grid.Row="2"/>
</Grid>
</Border>

My Question:

I want to add a column to my Grid. Currently my Items are displayed on top of each other and I want to display them both on top as well as side by side. That is why I want to add a column. I can't figure out how to get my Items to display correctly this way. Can someone please help me with this.

Thanks

[1508 byte] By [Lawrence007] at [2008-1-8]
«« Opening From a Variable File Location
»» [Data Binding] HirachialDataTemplate and XPath
# 1

I don't quite understand what you are trying to acheive from, "both on top as well as side by side". Can you clarify your question?

If you are just confused about how to add a column to your grid, you can do this just like you added rows:

Code Snippet

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

...

</Grid.ColumnDefinitions>

<TextBlock ... Grid.Column="0" />

<TextBlock ... Grid.Column="1" />

Describe your desired result a bit, maybe with a drawing, and I'll try and help you further.

-Mike

MikeCook-MSFT at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 2

Mike,

Sorry for the delay:

I had more or less the same issue earlier, but then I just required a picture and my issue was resolved. The issue I have now is as follows: I want my end project to look like this:

Item1 Item2

Item1 Description Item2 Description

Item1 Picture Item2 Picture

Item3 Item4

Item3 Description Item4 Description

Item3 Picture Item4 Picture

If I use my code as in the post above Less the grid I get the desired results, but that ONLY shows the picture and I lose the Item description as well as Item (This is my Item Number). That is why I am trying to use the grid. Then I also have more flexibility in working with mouseover events and so on (I think). That will then also display my Item, Item Description AND picture. That is my ultimate goal.

I am not bound to a grid, if there is something else I can use to get this result I would love to give it a shot.

Thanks.

Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 3
I think wrappanel or uniformgrid might be better
leed at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 4

Lee,

I tried what you suggested, but to no avail... Is there tutorials or Examples out there that I can try?

Thanks

Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 5
can you post what you tried, so we can see what did not work
leed at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 6

This is what I have done so far:

Code Snippet

<Window.Resources>
<XmlDataProvider x:Key="ItemsDS" d:IsDataSource="True" Source="C:\XML Files\ShortItems.xml"/>
<Style TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border
BorderBrush="Black"
BorderThickness="4"
CornerRadius="5"
Margin="6"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Mode=OneWay, XPath=ItemLookupCode}"/>
<TextBlock Grid.Row="1" Text="{Binding Mode=OneWay, XPath=Price}"/>
<Image Grid.Row="2" Source="{Binding Mode=OneWay, XPath=Image}"/>
</Grid>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>


<Setter
Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled"
/>
</Style>
</Window.Resources>
<Window.Background>
<LinearGradientBrush EndPoint="0.5,0.969" StartPoint="0.5,0.067">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Window.Background>

<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="121.857"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="2"/>
<ListBox ItemsSource="{Binding Mode=Default, Source={StaticResource ItemsDS}, XPath=/Items/Item}" Margin="0,0,208,0" Grid.Row="1"/>
</Grid>
</Window>

Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 7

try setting the width

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<WrapPanel IsItemsHost="True" Height="250" Width="550" ItemWidth="250"></WrapPanel>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

leed at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 8

That is EXACTLY what I wanted! There is just one issue now:

Only the first 4 items are showing up. Do you maybe know why?

Can I add a virtical scroll bar to scroll up and down? If so how?

Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 9

try removing the height on the wrap panel

leed at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 10

Lee,

I am so close to what I need, maybe I am missing something. Here is my code again, I did make some changes and maybe that might be the issue.....

Code Snippet

<Window.Resources>

<XmlDataProvider x:Key="ItemsDS" d:IsDataSource="True" Source="C:\XML Files\ShortItems.xml"/>

<ItemsPanelTemplate x:Key="ListViewCopy">

<WrapPanel/>

</ItemsPanelTemplate>

<DataTemplate x:Key="ItemTemplate">

<Grid Width="162.275">

<Grid.RowDefinitions>

<RowDefinition Height="0.517*"/>

<RowDefinition Height="162.895"/>

<RowDefinition Height="0.483*"/>

</Grid.RowDefinitions>

<WrapPanel Margin="0,0,0,0" Grid.RowSpan="3">

<TextBlock Text="{Binding Mode=OneWay, XPath=Price}" TextWrapping="Wrap" Width="198.275" Height="26.399331"/>

<Image Source="{Binding Mode=OneWay, XPath=Image}" Width="198.275" Height="162.895"/>

<TextBlock Text="{Binding Mode=OneWay, XPath=ItemLookupCode}" Width="198.275" Height="28.257669"/>

</WrapPanel>

</Grid>

</DataTemplate>

</Window.Resources>

<Window.Background>

<LinearGradientBrush EndPoint="0.5,0.969" StartPoint="0.5,0.067">

<GradientStop Color="#FF000000" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush>

</Window.Background>

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="121.857"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid Grid.RowSpan="2"/>

<ListBox ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Mode=Default, Source={StaticResource ItemsDS}, XPath=/Items/Item}" Grid.Row="1" ItemsPanel="{DynamicResource GridListCopyMSDNLEE}" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="MainListBox"/>

<Grid DataContext="{Binding Path=SelectedItem, ElementName=MainListBox, Mode=Default}">

<Image HorizontalAlignment="Right" x:Name="TopImage" Width="186" Source="{Binding Mode=Default, XPath=Image}"/>

<TextBlock Margin="0,8,186,47.857" Foreground="#FFFFF9F9" Text="{Binding Mode=Default, XPath=Description}" TextWrapping="Wrap"/>

<TextBlock Margin="0,0,186,8" VerticalAlignment="Bottom" Height="35.857" Foreground="#FFFFFFFF" Text="{Binding Mode=Default, XPath=ItemLookupCode}" TextWrapping="Wrap"/>

</Grid>

</Grid>

</Window>
Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 11

try this

<ListBox ItemTemplate="{DynamicResource ItemTemplate}"

ItemsSource="{Binding Mode=Default, Source={StaticResource ItemsDS}, XPath=/Items/Item}"

Grid.Row="1"

Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Visible" x:Name="MainListBox">

<ListBox.ItemsPanel>

<ItemsPanelTemplate>

<WrapPanel IsItemsHost="True" Width="350" ItemWidth="175" ></WrapPanel>

</ItemsPanelTemplate>

</ListBox.ItemsPanel>

</ListBox>

leed at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
# 12

Thank you Lee!!

It is now doing what I intended it to do!

Thanks!

Lawrence007 at 2007-10-2 > top of Msdn Tech,Visual Studio Orcas,Windows Presentation Foundation (WPF)...
Visual Studio Orcas
Windows Presentation Foundation (WPF)

Visual Studio Orcas Hot Topic

Visual Studio Orcas New Topic

Visual Studio Orcas

Java / MSDN / Linux Tech / PHP Tech / MSDN DotNet / MSDN TECH / Health Library / Programmers Tech / visual basic Tech / Developer Tech / Ipod faqs / Msdn China Tech

Site Classified