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>
Related
I have a lot of RadioButtons and Checkboxes and I basically want to split them in a second Column, to make it look more user friendly. I found some examples but not really for WPF.
Picture of Buttons
and this is my XAML:
<Grid>
<ItemsControl ItemsSource="{Binding AuswahlOptionenViewModelCollection}" Margin="115,50,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="antwortmoeglichkeiten:OptionViewModel">
<Viewbox Height="25" HorizontalAlignment="Left" VerticalAlignment="Top">
<CheckBox Style="{DynamicResource MaterialDesignUserForegroundCheckBox}"
CommandParameter="{Binding}"
Command="{Binding SelectedOptionViewModelCommand}"
IsChecked="{Binding Selected}"
Content="{Binding Value}"/>
</Viewbox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
You can change ItemsPanel and use UniformGrid with 2 columns:
<ItemsControl ...>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="2"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
...
</ItemsControl.ItemTemplate>
</ItemsControl>
I've got a TextBox inside a StackView inside a ListViewItem and I want it to wrap rather than expand when the contents becomes wider than the available space.
The LVI is defined by this template:
<DataTemplate DataType="{x:Type custom:FreeCommentQuestion}">
<StackPanel Margin="5">
<Label Content="{Binding Text}"/>
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Text="{Binding Comment}"/>
</StackPanel>
</DataTemplate>
And the ListView is inside a ScrollViewer in a TabItem:
<TabItem Header="Testing" >
<ScrollViewer>
<ListView ItemsSource="{Binding Questions}" HorizontalContentAlignment="Stretch"/>
</ScrollViewer>
</TabItem>
It all looks fine:
Until I type too much in:
I could set the MaximumWidth in code but this seems like it ought to be unecessary.
The ListView also doesnt seem to be shrinking back down when the window has been resized bigger and then smaller again.
How do I fix this?
You don't need the scrollviewer as the default ListView template contains one.
Therefore you can remove the outer scrollviewer and set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on the ListView
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Questions}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<TextBox AcceptsReturn="True" TextWrapping="Wrap"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Alternatively, use an ItemsControl and keep the outer ScrollViewer
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding Questions}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox AcceptsReturn="True" TextWrapping="Wrap"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
ItemsControl is a lot more basic than the ListView but it looks to be more suited to your scenario.
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 the following datatemplate:
<ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="GroupStackPanel" Orientation="Horizontal">
<GroupBox Header="{Binding Path=GroupName}">
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
<Button Content="{Binding Path=LabelString}"
Command="{Binding Path=ButtonCommand}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This includes some ButtonGroups and Buttons which are in this Group.
The class Group includes a string-property "GroupName" and an ObservableCollection-property "Buttons". The allocation of buttons and groups is working correctly.
So here is my problem: I want to have this buttongroups in a ribbontab in the dockpanel. But the alignment or the orientation is false, so the buttons are one below the other and not next to each other.
Has anyone an idea what is wrong in my code?
At the moment, you're using a Stackpanel with horizontal orientation, which is the right idea, but the Stackpanel is in the wrong place (the ItemTemplate). The ItemTemplate is applied to every item in an ItemsControl, which means that your XAML represents a collection of buttons where each is surrounded by its very own StackPanel.
To have the desired effect, you instead need to specify the Stackpanel as the ItemsPanelTemplate of the ItemsControl.
Try changing your inner clause to:
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
</DataTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>
Edit
If you want both groups and buttons to display horizontally, you can do the same thing to both:
<ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<GroupBox Header="{Binding Path=GroupName}">
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
</DataTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="BtnStackPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>
</GroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="GroupStackPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsControl.ItemsPanel>
</ItemsControl>
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>