How to get TextBlock to Wrap or scroll inside FlowDocumentScrollViewer - wpf

I have the following XAML inside a 4 Row by 2 column grid. The Grid.ColumnDefinitions have both ColumnDefinition Width's set to *.
<FlowDocumentScrollViewer Style="{StaticResource myFlowDoc}"
Grid.Row="4"
Grid.Column="1" >
<FlowDocument >
<Paragraph LineHeight="12" >
<ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}" />
<TextBlock TextWrapping="Wrap" Text="{Binding /, Mode=OneWay}" />
</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
The data comes from an ObservaleCollection<string> and looks fine and scrolls vertically correctly. However, when one item doesn't fit horizontally in a TextBlock, the text block will not wrap and the FlowDocumentScrollViewer will not show scroll bars. The only way to see the text is to expand the window Horizontally. Does anyone know what I'm doing wrong and why the TextWrapping setting isn't honored?
In case it matters here is the style myFlowDoc
<Style x:Key="myFlowDoc">
<Setter Property="Control.Padding"
Value="0" />
<Setter Property="FlowDocumentScrollViewer.IsToolBarVisible"
Value="True" />
<Setter Property="Control.MinHeight"
Value="150" />
<Setter Property="Control.BorderBrush"
Value="SteelBlue" />
<Setter Property="Control.BorderThickness"
Value="2" />
<Setter Property="Control.VerticalAlignment"
Value="Stretch" />
</Style>
[EDIT 1]
Here is the full screen with an error message that should wrap. Below this image I have one showing just the message detail area with the window wider so you can see the entire message. I also put the entire xaml for the user control at https://gist.github.com/1036178#
[EDIT 2.1]
#Navid's suggestion led me to the answer indirectly. Removing the "/" and wrapping things in a data template seemed to do the trick. Here's the new XAML
<DataTemplate x:Key="StringCollection">
<TextBlock TextWrapping="Wrap" Text="{Binding}" TextAlignment="Left"/>
</DataTemplate>
<!--... now down in the ItemsControl-->
<ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}"
ItemTemplate="{StaticResource StringCollection}" />

use this
<ItemsControl ItemsSource="{Binding ReceivedData, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding /, Mode=OneWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

You can introduce a scrollbar by utilizing the ListView as
<Section Name="Gallery">
<Paragraph>
<ListView ItemsSource="{Binding GalleryCards}"
BorderBrush="Transparent"
HorizontalAlignment="Center"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Padding="10"
Width="{Binding ElementName=Viewer, Path=RenderSize.Width, Converter={StaticResource DocumentSizeConverter}, ConverterParameter=80, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<ContentControl s:View.Model="{Binding .}"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Paragraph>
</Section>

Related

How to stretch a Border to fill the width of a ListViewItem?

I have a ListView as follows:
<ListView ItemsSource="{Binding SerialNumbers}" SelectionMode="Multiple" HorizontalAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="Red" Padding="14 5" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Stretch" Text="{Binding Number}" />
<behaviours:Interaction.Triggers>
<behaviours:EventTrigger EventName="MouseLeftButtonUp">
<behaviours:InvokeCommandAction Command="{Binding Path=DataContext.SerialNumberSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding}" />
</behaviours:EventTrigger>
</behaviours:Interaction.Triggers>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want the Border to take the full width as the ListViewItem, but it is not happening. I've tried adding HorizontalAlignment="Stretch" to the ListView, Border, and the TextBlock. It isn't working. It currently looks like this.
How can I stretch the Border to get the full width of the ListViewItem.
I want to achieve this because I have a MouseLeftButtonUp event linked to the Border, which will call a command. As the Border is only the red part, it will only be called on clicking the red part. I want it to be called on clicking the total width of the ListViewItem.
In my opinion, the cleanest way to achieve it is to set HorizontalContentAlignment to the ListViewItem. You can easily achieve this using a style, like this:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="Red" >
<TextBlock Text="{Binding}"/>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>

How to clear the margins of the corners of a checkbox in a listbox

enter image description here
Please check the image.
There is a checkbox in the template in the listbox, and I set the red background color in it.
When I click on the red checkbox works fine.
But when I click on the image black arrow, it is not checked.
How can I clear the whitespace and synchronize it with the checkbox?
I tried setting margin padding but couldn't solve it.
<ListBox x:Name="xList" Grid.Row="1" HorizontalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="red">
<CheckBox IsChecked="{Binding IsVisible, Mode=TwoWay}"
VerticalContentAlignment="Center"
Content="{Binding Header}"
Height="28" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you for helping me.
Add this code to your ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0" />
</Style>
</ListBox.ItemContainerStyle>
This will set the Padding of the ListBoxItem container to 0. The result looks like this:

How to resize ListBoxItems in a horizontal ListBox as the number of items grows [duplicate]

I have a problem with my ListBox in WPF. First of all, I have a horizontal ListBox with custom ItemTemplate. Now, I want to stretch the items, so that the items fits over the complete width of the ListBox. I tried things like setting the HorizontalContentAlignment to Stretch, but this still not working.
Here is my ItemTemplate:
<DataTemplate x:Key="ListViewStepTemplate">
<Grid VerticalAlignment="Stretch">
<TextBlock Text="{Binding Path=Title}"
FontSize="15"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Image Height="16"
Width="16"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Source="/images/Content/check_16x16.png"
Visibility="{Binding Path=IsDone, Converter={StaticResource BooleantoVisibilityConverter}, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</DataTemplate>
And this is my ListBox:
<ListBox DockPanel.Dock="Top"
ItemsSource="{Binding AllItemsList}"
SelectedItem="{Binding CurrentItem}"
ItemTemplate="{StaticResource ListViewStepTemplate}"
Height="60"
HorizontalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsEnabled" Value="{Binding IsEnabled, UpdateSourceTrigger=PropertyChanged}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="30 0" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
If there are 4 items, each item should have a width of 25%. If there are 5 items, each item should have a width of 20% and so on.
Is it possible to do what I want to do? I tried a lot of things now, but it does never work.
Instead of using StackPanel use UniformGrid
Provides a way to arrange content in a grid where all the cells in the grid have the same size.
and bind number of columns to number of items in the list and disable horizontal scrolling functionality.
<ListBox
...
ItemsSource="{Binding AllItemsList}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="{Binding AllItemsList.Count}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<!-- style -->
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Don't use a StackPanel, use an UniformGrid instead.
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="{Binding DataContext.Count, RelativeSource={RelativeSource Self}}"/>
</ItemsPanelTemplate>

Changing mouseover effect on Mahapps Tile

So recently I've started using MahApps.Metro for an application.
It's been going great, but one problem I cannot solve is MouseOver effect on a Tile.
I have a Grid, in which there's an Expander that hosts all the Tiles each of which represent a connection to the specific database. They are bound to an ObservableCollection which I populate from another database.
<Grid>
<Expander Margin="5" Header="Server Connections">
<ListBox ItemsSource="{Binding OmsConnections}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<controls:Tile
Title="{Binding Name}"
controls:ControlsHelper.MouseOverBorderBrush="{DynamicResource BlackBrush}"
Background="{DynamicResource GrayBrush2}"
Command="{Binding DataContext.TileClickCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
CommandParameter="{Binding}"
HorizontalTitleAlignment="Left"
Style="{StaticResource LargeTileStyle}"
TiltFactor="2">
<Image
Width="60"
Height="60"
Source="{Binding OmsConnectionTypeId, Converter={StaticResource ConnectionTypeToIconConverter}}" />
</controls:Tile>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander>
</Grid>
This is the style applied via Style
<Style x:Key="LargeTileStyle" TargetType="controls:Tile">
<Setter Property="Height" Value="125" />
<Setter Property="TitleFontSize" Value="14" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="TextOptions.TextRenderingMode" Value="ClearType" />
<Setter Property="Width" Value="210" />
</Style>
So Whenever I mouseover an item I get the black border as specified, and this Orange Background Color (Which, if I'm not mistaken, is AccentColorBrush3) and I have no idea how to change it.
Here's the Image, since my rep is low and i cannot embed it.
Also, I'm really, really bad with Templates and Styles, so this is pretty much what i scrapped from the internet. ANY Feedback would be much appreciated for both the way I Bound to a collection and how to change the MouseOver color.
You could "override" the AccentColorBrush3 resource by adding a SolidColorBrush resource to the ListBox:
<ListBox ItemsSource="{Binding OmsConnections}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<!-- Specify the highlight brush here: -->
<ListBox.Resources>
<SolidColorBrush x:Key="AccentColorBrush3" Color="Yellow" />
</ListBox.Resources>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<controls:Tile
Title="{Binding Name}"
controls:ControlsHelper.MouseOverBorderBrush="{DynamicResource BlackBrush}"
Background="{DynamicResource GrayBrush2}"
Command="{Binding DataContext.TileClickCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
CommandParameter="{Binding}"
HorizontalTitleAlignment="Left"
Style="{StaticResource LargeTileStyle}"
TiltFactor="2">
<Image Width="60"
Height="60"
Source="{Binding OmsConnectionTypeId, Converter={StaticResource ConnectionTypeToIconConverter}}" />
</controls:Tile>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Tabbing User Control In Listbox DataTemplate

I have a User Control in a ListBox and when I use the tab key to focus I'd like to get the focus on the TextBox in my Control instead of the Custom Control. How can I do it?
I simplified the code because In my control I have other UI Elements.
User Control Code:
<Grid>
<TextBox Name="txtFreeTextDescription" Style="{StaticResource TextBoxStyleLargeDynamic}" Text="{Binding Description, Mode=TwoWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</Grid>
ListBox Code:
<ListBox Name="lsbItems" DataContext="{Binding}" KeyboardNavigation.TabNavigation="Local">
<ListBox.ItemTemplate>
<DataTemplate>
<local:SectionDynamicItem x:Name="ucSectionDynamicItem" Description="{Binding SectionItem.Description}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This works for me....
<ListBox ItemsSource="{Binding EmployeeList}"
KeyboardNavigation.TabNavigation="Continue">
<ItemsControl.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Focusable" Value="False"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="5" Focusable="False">
<TextBox Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
Check below link.
http://social.msdn.microsoft.com/forums/en-US/wpf/thread/98d8423c-9719-4291-94e2-c5bf3d80cd46/
Thanks
Rajnikant

Resources