I'm using the following xaml code to display a list horizontally,
<ListBox x:Name="List" HorizontalAlignment="Left" Height="429" Margin="18,83,0,0" VerticalAlignment="Top" Width="424" SelectionChanged="List_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="420" Height="80">
<TextBox x:Name="tbName" IsHitTestVisible="False" Height="70" Background="Green" Foreground="White" FontSize="22" BorderThickness="0" Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What I want exactly is:
after the TextBlock crosses the width it should be placed in the next line (Typically it should be like how we write in a paper).
i.e . until we reach the end of the StackPanel we will append the TextBox horizontally, but after the end of the StackPanel is reached we will place the next TextBox in the next line).
How can i do it??
try to add this code in your listBox:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
the oriention of items depends on ItemsPanel.
Here's the namespace:
xmlns:tlk="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
and there is how to use it:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<tlk:WrapPanel></tlk:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Remember
You must reference: Microsoft.Phone.Controls.Toolkit.dll
Related
I have an ItemsControl with materialDesign Chips as a DataTemplate. My goal is to place the items one after the other without a lot of space in between.
There is a pic what is now looks like: https://imgur.com/hicWnGg.png
And this is my Goal: https://imgur.com/0jIEk8k.png
I tried already the ItemContainerStyle with Margin but this didnt helped me out
My Current Code
<ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<ItemsControl x:Name="myItemsControl" Height="40" Margin="0 10 0 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<materialDesign:Chip Tag="{Binding Name}" Uid="{Binding SourceName}" Content="{Binding Code}" Width="75" IsDeletable="True" DeleteClick="Chip_DeleteClick"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Change your ItemsPanelTemplate to StackPanel instead of UniformGrid
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Here is my XAML I want to show series of image use DataTempalte in ItemsControl,
when I run the program the screen show only one image. I can't find what's wrong with it.
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsControl Width="1024" Height="658" ItemsSource="{Binding ImageSet}" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="1024" Height="658" Orientation="Horizontal">
<Image x:Name="rectangle" Source="{Binding Img}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
Can anybody help me to find out, appreciate!
So, correct me if I am wrong, but I think you are trying to scroll horizontally through your pictures. You have your ScrollViewer set to scroll horizontally but the ItemsControl inside does not have a horizontal orientation by default. This is why you are only seeing one picture. Try changing the default ItemsPanel and see if you get better results. Something like this:
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<ItemsControl Width="1024"
Height="658"
ItemsSource="{Binding ImageSet}"
ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Img}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
This was a great resource for me when I was first trying to understand the ItemsControl in WPF: http://drwpf.com/blog/itemscontrol-a-to-z/
I have a Grid View that is used to display "tags" which is a list of strings that are dynamic in size. Using the following code:
<GridView ItemsSource="{Binding Tags}"
ItemTemplate="{StaticResource TagTemplate}"
VerticalAlignment="Bottom"
Grid.RowSpan="2"
SelectionMode="None"
/>
I use the following Template for the items:
<DataTemplate x:Name="TagTemplate">
<Border BorderBrush="Gray" BorderThickness="1" Opacity="75">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
When added to the Grid, the size of each of the items are the same size as the first:
How do I dynamically size the items within the GridView?
So something like;
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Tags}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
<!-- Or use WrapPanel depending on its display -->
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1" Opacity="75" Padding="3" Margin="3,0">
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Can somebody help me out in creating a listbox with a checkbox and star rating control align horizontally? I want it for WP7 using C# and XAML.
You need to code a custom list here is an example:
You need to include ControlToolkit:
xmlns:ControlsToolkit="clr-namespace:System.Windows.Controls"
and here is code:
<ListBox x:Name="listBox" SelectionMode="Multiple"
ItemContainerStyle="StaticResource ListBoxCheckedStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<TextBlock Text="{Binding Name}" Width="150" VerticalAlignment="Center"/>
<ControlsToolkit:Rating Height="50" Grid.Row="0" x:Name="rating" ItemCount="5">
<ControlsToolkit:Rating.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ControlsToolkit:Rating.ItemsPanel>
</ControlsToolkit:Rating>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can download sample from here:
DownloadSample
or check details here:
Sample site
You can get more detail on these:
CustomDataTemplateSelector
WP7 Checked ListBox in different ways.
Set the ItemTemplate:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<ns:StarControl/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
For some reason, Items added witin a dataTemplate will not do what I tell them to do!!
I am trying to put a number of images horizontally within a stackpanel, but no matter how I try, they only go vertically.
Here is my xaml.
<DataTemplate x:Name="View">
<Border BorderBrush="Red" BorderThickness="4" >
<StackPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Path=_Collection, Mode=OneWay}" >
<ItemsControl.ItemTemplate>
<DataTemplate >
<Image Source="{Binding _Source}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Height="30" FontFamily="Trebuchet MS" FontSize="18" Text="{Binding _Name}" />
</StackPanel>
</Border>
</DataTemplate>
Everything is bound ok. This is called from within the user control proper
<ItemsControl ItemTemplate="{StaticResource siteView}" ItemsSource="{Binding Path=_SiteDisplay"/>
My obervable colletion _SiteDisplay contains another oberservable collection called _Collection which holds the url of the image.
This is cut down from the real code, but illustrates the problem. I can not get the images to align horizontally! Any help very much appreciated - or suggestions for better ways of doing this.
You need to change the panel used by the ItemsControl, not the panel that contains the ItemsControl:
<ItemsControl ItemsSource="{Binding Path=_Collection, Mode=OneWay}" >
<ItemsControl.ItemTemplate>
<DataTemplate >
<Image Source="{Binding _Source}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>