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.
Related
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 simple ListView
<Grid>
<ListView
x:Name="lstScreenshots"
Background="#303030"
ItemsSource="{Binding ElementName=_this, Path=Screenshots}">
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type local:SelectOpenWindowDialog}">
<DockPanel>
<TextBlock Foreground="WhiteSmoke" FontFamily="Arial" FontWeight="Bold" FontSize="13" Height="30" DockPanel.Dock="Top" Margin="3" Text="{Binding Title}"/>
<Image Margin="3" Height="340" Source="{Binding Screenshot, Converter={local:BitmapToBitmapImageConverter}}"/>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
where one items height fills exactly the window height. when scrolling down with the mousewheel, the displayed item changes from ie the first to the fourth row. how can I change the mousewheel's behaviour to only scroll one item
I have a DataTemplate for my ListBox and want to wrap a TextBlock, so the message will be displayed in the next line... So I've written this code:
<ListBox x:Name="CareListBox" ItemsSource="{Binding}" Grid.Column="1" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pic.png" />
<TextBlock Text="{Binding Message}" Style="{StaticResource SubheaderTextStyle}" Margin="25,0,0,0" HorizontalAlignment="Stretch" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What am I doing wrong?
I would use a Grid with two columns rather than a horizontal StackPanel as the StackPanel won't have a width constraint.
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>