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 TransferCountText}" />
</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>
Related
I am developing an app on Windows 8.1 and using MVVM Light Framework.
So this is the partial XAML on one of my views.
Basically, I have a ViewModel_Queue which I contains a command that I need to call when a button is pressed inside the FlyoutMenu. My problem is, how will I be able to call this ViewModel_Queue where inside a binding ItemControl which is inside in another ItemControl which is then binded as well?
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Person.Child}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="#FF808080" Width="200">
<Grid>
<TextBlock Text="{Binding Name}" FontSize="15" Foreground="White" Margin="10" VerticalAlignment="Center" FontWeight="Bold" />
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Counters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="120" Background="#0F000000">
<!-- get header color -->
<Border Height="20">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding DataContext.Queue.Command_DoSomething, ElementName=mainGrid}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<TextBlock Text="{Binding Total}" FontSize="15" Foreground="Black" Margin="10" TextAlignment="Center" x:Name="outcomeCounterCell" Tapped="outcomeCounterCell_Tapped">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom" x:Name="MenuFlyout" FlyoutPresenterStyle="{StaticResource FlyoutPresenterRoundStyle}">
<Grid Width="200">
<StackPanel>
<Border Background="#7FFF0000" CornerRadius="8,8,0,0">
<TextBlock Text="Update" TextAlignment="Center" FontSize="15" Margin="0,10" Foreground="White" />
</Border>
<TextBlock Text="{Binding Total}" TextAlignment="Center" FontSize="30" Margin="0,20,0,0" Foreground="Black" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="5,0,0,5" Width="50">
<TextBlock Text=" - " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Decrement}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="0,5,5,0" Width="50">
<TextBlock Text=" + " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Increment}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
</StackPanel>
</StackPanel>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'm working on C# WPF Chat application. I want it to look like Skype chat, so last added item is touching the bottom of ListBox.
Screenshot:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to update the internal ItemsPanelTemplate of the ListBox... try this:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data
Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)
I am displaying Calendar to the user from My WPF application. I have the Observable collection and binding these collections from the viewmodel.In Order to display as like Calendar (first 7 columns in first row, second 7 columns in the next rows ect),I am using "Wrap Panel".The Below code works perfectly in Windows 7.But When I tried to run this in Windows 8,I can see Only the first 5 columns are displaying in a Row. How can I solvemit?Is there any problem for Wrap Panel Width in Windows 8 Os?
<ListBox x:Name="lstIcon" Grid.Row="1" ItemsSource="{Binding CalenderDatalist}" Background="#FFF9F9F9" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="245">
</WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="33" Height="60">
<TextBlock Width="15" Text="{Binding Day}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Foreground="Red" />
<StackPanel Background="{Binding IsDropped,Converter={StaticResource BooleanToBackgroundConvertor}}" >
<TextBlock Width="25" Text="{Binding From}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
<TextBlock Width="25" Text="{Binding To}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
<TextBlock Width="25" Text="{Binding Time}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Since your DataTemplate items are having fixed size, set ItemWidth property to WrapPanel.
Like,
<WrapPanel Orientation="Horizontal" Width="245" ItemWidth="33">
</WrapPanel>
I have a twitter feed in a list box in a app I'm making for Windows Phone 7. The problem I'm having is that the text of a tweet is being cut off the edge of the list box instead of wrapping around to a new line like this:
The list box is inside a panorama which works fine. This is my code:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="Auto">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I get the tweet text to wrap round instead of being cut off? Thank you.
Since your inner StackPanel is nested within a horizontal Stackpanel, it has no constraint of depth, and so the TextBlocks expand infinitely as the text becomes longer.
There are a variety of ways you can fix the issue, but an easy one (if you know the width that you want) is to set the inner StackPanel's width to a finite number.
For example:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="400">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this helps!