Develop Reference

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.

WPF show series of image use ItemsControl

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/

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

GridView width based on ItemsSource

I am currently using a GridView to display a list of images that the user can swipe through. When they get close to the end of the list, new images load through the use of a ObservableCollection that implements ISupportIncrementalLoading.
How do I change the cell size to match the size of the image? The images are sometimes in Portrait, and sometimes in Landscape, and sometimes in an non-uniform aspect ratio; however, the GridView insists on all the cells being the same width.
e.g. if I go with the following:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="None"
DataFetchSize="10"
IncrementalLoadingThreshold="5"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IncrementalLoadingTrigger="Edge"
IsSwipeEnabled="false">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,5,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I end up with all the times being the same width as the first image. If I try to set the image width (I have a databound property that returns the image width), some of the images end up being less wide, but the cell they are in is still the same width as everything else.
<Image Width="{Binding ImageWidth}" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
Setting the width on any item in the hierarchy doesn't seem to help - even taking this to the extreme doesn't help at all - e.g.
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="{Binding ImageWidth}">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="{Binding ImageWidth}">
<Image Width="{Binding ImageWidth}" Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,5,0"/>
</StackPanel>
</Grid>
</DataTemplate>

There are two ItemsPanelTemplate-s that supports incremental loading: VirtualizingStackPanel and WrapGrid.
WrapGrid does not allow different items' size.
VirtualizingStackPanel allows variable size of items but displays items in one row/column.
So if you want a different layout you need a custom implementation of VirtualizingPanel.
But I do not understand what do you want exactly. If you want a grid then all items in a row or column will have the same height or width. Do you want a virtualizing VariableSizedWrapGrid?

Take a look at the VariableSizedWrapGrid
try to add this xaml to your GridView declaration:
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>

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>