Automatic text wrapping in listbox - c#

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.

Related

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.

How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox in Windows 10 universal?

I want to have the ListItems to extend with their Stackpanel the full width of the Listbox.
Currently they are only as wide as the textblocks.
What do I have to do so that the Stackpanel of the ListBoxItems fill the width of the ListBox?
<ListBox Name="feedListBox" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="Single" SelectionChanged="feedListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe UI Symbol" Text="⛽" FontSize="25"/>
<StackPanel Orientation="Vertical">
<TextBlock Name="txtDate" Text="{Binding Date}" FontSize="15" Margin="20,0,0,0"/>
<TextBlock Name="txtDitance" Text="{Binding Distance}" FontSize="15" Margin="20,5,0,0"/>
</StackPanel>
<TextBlock Name="txtPrice" Text="{Binding Price}" FontSize="15" Margin="30,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
delete: VerticalAlignment="Top"
and use: HorizontalContentAlignment="Stretch"

Binding Text on TextBlock not show the whole text windows phone 8

I've got an issue that the TextBlock not showing fully while the string is more than 1000 characters.
I've tried use this code
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
or
VerticalAlignment="Stretch" on my TextBlock
or use this code
<ListBox ItemsSource="{Binding ArticleDataDetail}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding TaxoName}" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FF2976B9"/>
<TextBlock Text="{Binding Title}" FontWeight="Bold" TextWrapping="Wrap" Style="{StaticResource PhoneTextTitle3Style}"/>
<Image Source="{Binding Picture}" Width="auto" Name="articleImage" Margin="10"/>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
But It still not show.
my code:
<Grid Margin="12,0,12,0" DataContext="{Binding ArticleDataDetail[0]}">
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<StackPanel>
<TextBlock Text="{Binding Content}" TextWrapping="Wrap" VerticalAlignment="Stretch"></TextBlock>
<TextBlock Text="GeuT"></TextBlock>
</StackPanel>
</ScrollViewer>
</Grid>
Do you mean the TextBlock in the ItemTemplate? If it's the case maybe this helps:
Set the HorizontalContentAlignment attribute of the ListBox to "Stretch":
<ListBox ... HorizontalContentAlignment="Stretch"></ListBox>
I'm just guessing what your problem is, so if it's not the case I think you should make your question clearer: rephrase it or add some illustrating images.
Another thing I could think of - without a screenshot - is that maybe the Textblock is too small to fit all the content and that it would have to be scrollable.
Scrollbars don't appear automatically if the text exceeds the display item size limits. You can enable them by adding the following properties to your TextBlocks:
ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible"

Listview - MouseWheel scrolls too many items

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

Aligning TextBlock Vertically Inside StackPanel

In my WPF application I have a DataGrid with multiple DataGridTemplateColumns. One of the columns looks like this:
<DataGridTemplateColumn Header="Column" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding SomeSource}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Margin="5"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Green" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="6" BorderThickness="2">
<StackPanel Background="Green" Width="200" Height="150">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" FontSize="17" FontWeight="Bold" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This produces the following output:
As you can see the TextBlock which displays the Title is not vertically centered inside the green StackPanel. How can I do that?
StackPanel doesn't have a concept of its height, so you can't vertically-align its children. You'll have to do something a bit differently.
For example, move the fixed 150-height and background from the StackPanel to its parent border -- that way, you can vertically-align the StackPanel within the Border:
<Border Background="Green" Height="150" BorderBrush="Green" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="6" BorderThickness="2">
<StackPanel Width="200" VerticalAlignment="Center">
<TextBlock Text="{Binding}" HorizontalAlignment="Center" FontSize="17" FontWeight="Bold" />
</StackPanel>
</Border>
(It's not really clear why you're using that inner StackPanel since it only has one child, but I've assumed you're going to add something else to it.)

Categories

Resources