Develop Reference

Split RadioButtons/Checkbox into 2 columns

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>

Prevent TextBox in ListViewItem Expanding

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.

WrapPanel does not redraw on maximize

I am using wrappanel (WPF 4.5) inside ListView (itemspanel template).
When I resize the window, wrappanel redraws itself correctly.
When I maximize it, it does not redraw itself.
Below is the code(XAML)
<ListView ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="3" Width="200" Height="200">
<TextBlock Text="{Binding}"></TextBlock>
<Image Source="{Binding}"></Image>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding Path=Width, RelativeSource={RelativeSource AncestorType=Window}}" ></WrapPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Below are the screenshots
Normal
Resize (everthing is alright)
Maximized (problem, look at red curve spot, listview/wrappanel is supposed to redraw and fill this with subsequent sample images)

Issue is you have binded Width of Wrap panel to width of window which will remain constant always what you have specified in XAML.
Replace Width with ActualWidth which always updated with current width of window.
<WrapPanel HorizontalAlignment="Left" VerticalAlignment="Top"
Width="{Binding Path=ActualWidth,
RelativeSource={RelativeSource AncestorType=Window}}"/>

How to use Horizontal Orientation in WP8 ListBox?

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

Arranging ItemsControl items within a DataTemplate

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>