Populate two column grid with databinding?
How do i populate a two column grid with objects from my observable collection?
I've tried to achieve this effect by using the tookits wrap panel but the items just stack.
<toolkit:WrapPanel Margin="5,0,0,0" Width="400">
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCo开发者_开发百科untText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</toolkit:WrapPanel>
The only child for the WrapPanel
will be the ItemsControl
so the stacking is done by the internal ItemsPanel
in the ItemsControl
which, by default, is a StackPanel
with Vertical Orientation. So to get "two columns", try to move the WrapPanel
into the ItemsControl.ItemsPanel
instead like this
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Margin="5,0,0,0" Width="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
精彩评论