Textblock textwrapping not working - wpf

Can somebody give me an idea of why the Wrapping is not working inide these Textblocks?
I just don't know why, i changed all my stackpanels to grids to avoid the infinite space issue, but still it doesn't work...
<Border x:Name="SummaryRightSideContainerBorder" Grid.Column="1"
Margin="10,10,10,10" BorderBrush="Black"
BorderThickness="1">
<ContentControl x:Name="SummaryRightSideContainerContentControl" Content="{Binding SelectedItem, ElementName=SummaryTreeView}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type ViewModelsProject:ProjectViewModel}">
<StackPanel>
<TextBlock Text="Displaying Project DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:SequenceViewModel}">
<StackPanel>
<TextBlock Text="Displaying Sequence DataContract stuff..." />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:GroupViewModel}">
<StackPanel>
<DataGrid Margin="10" AutoGenerateColumns="False"
Background="Transparent" BorderThickness="0"
CanUserAddRows="False"
CellStyle="{DynamicResource dgCellStyle}"
ColumnHeaderStyle="{DynamicResource dgHeader}"
DataContext="{Binding ElementName=SummaryTreeView,
Path=SelectedItem}"
GridLinesVisibility="None"
ItemsSource="{Binding Standards}"
Padding="0" RowHeaderWidth="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.Resources>
<Style x:Key="dgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<TextBlock Width="{TemplateBinding Width}"
Padding="5"
Text="{TemplateBinding Content}"
TextAlignment="Left">
<TextBlock.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="#373638" />
<GradientStop Offset="1.0" Color="#77797B" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="dgCellStyle" TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Standards">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=StepMaster.Description}" VerticalAlignment="Center" FontWeight="SemiBold"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Standard: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Standard}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Details: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Details}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Comments: " VerticalAlignment="Top"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Comments}" Margin="5,0,0,0" VerticalAlignment="Top" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelsProject:StepViewModel}">
<UniformGrid Rows="3">
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards" />
<TextBlock Margin="10" FontWeight="DemiBold"
Text="Standards Details" />
<StackPanel Orientation="Vertical">
<DataGrid Margin="10" AutoGenerateColumns="False"
<Another data grid is here />
</DataGrid>
</StackPanel>
</UniformGrid>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Border>

Turns out the only way to make this work is to use properties directly in the DataGrid:
MaxWidth="{Binding ElementName=SummaryRightSideContainerBorder, Path=ActualWidth}" ColumnWidth="*"
MaxWidth is used so that the Datagrid itself does not exceed its container boundaries and ColumnWidth is used so that the columns use 100% of the space available in the datagrid.
Blam's answer put me in the right track to find the solution.

As an answer you need to set second column to
<ColumnDefinition Width="*"/>
so it is constrained. * mean the size of the container. Right now it is growing outside the container (screen)
first column auto is OK

Related

Wpf Grid with 2 Rows width sizing

I am trying to work on this WPF design and not having any luck
This is the xaml
<UserControl x:Class="namespace.myuserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
mc:Ignorable="d"
Loaded="UserControl_Loaded"
Focusable="True"
d:DesignHeight="10000" d:DesignWidth="1049">
<UserControl.Resources>
<CollectionViewSource x:Key="DocumentGroup" Source="{Binding docs}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="type.Name"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<DataTemplate x:Key="groupingHeaderTemplate">
<Label VerticalAlignment="Center" Content="{Binding}" FontWeight="Bold" Background="AliceBlue"></Label>
</DataTemplate>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Left" VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="50" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>
The button is not visible because you set row height to 50 but also button height to 100. I would set row height to Auto in this case.
White space on the right side in the second column is due to you've set main grid HorizontalAlignment to Left. Just remove it.
WebView2 doesn't fill the space because the parent grid has HorizontalAlignment set to Left.
Here is updated xaml (main grid only)
...
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" ></ColumnDefinition>
<ColumnDefinition Width="6"></ColumnDefinition>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Stretch"
BorderBrush="DarkSlateGray" BorderThickness="1" Width="6" ShowsPreview="True" >
<GridSplitter.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF808385" Offset="0"/>
<GradientStop Color="#FFECF1F7" Offset="1"/>
</LinearGradientBrush>
</GridSplitter.Background>
</GridSplitter>
<ScrollViewer >
<ListBox Grid.Column ="0" ScrollViewer.VerticalScrollBarVisibility="Visible" Name="lstCustomList" ItemsSource="{Binding Source={StaticResource DocumentGroup}}"
SelectionChanged="ShowDocument" >
<ListBox.GroupStyle>
<GroupStyle HeaderTemplate= "{StaticResource groupingHeaderTemplate}" />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
<Label Name="clLabel" Height="10000" Content="{Binding docResult, UpdateSourceTrigger=PropertyChanged}" Foreground="Red" Padding="5" Grid.ColumnSpan="2" Margin="0,0,7,0">
<Label.Style>
<Style TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding docs.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
<ScrollViewer Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid VerticalAlignment="Stretch" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Width="300" Height="100">Launch</Button>
<wpf:WebView2 Grid.Row="1" Name="View2" />
</Grid>
</ScrollViewer>
</Grid>

Display Button as long as ListView doesn't has more than five Items

I have some ListViews who each can contain max 5 ListViewItems. As long as there are less than 5 items there should be an Button be displayed. I have already written an Value Converter that returns true if the Count is less than five. But now I have Problems styling my ListView. Because i.e. if there are three ListViewItems they should be styled with the normal style and the "4" item should be an Button. My tought was that I add a new ListViewItem inside the DataTrigger. Is that possible or is there a better way to achive that?
Style.xaml
<Style TargetType="{x:Type ListView}">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Rows="5" Columns="1"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Items.Count, Converter={StaticResource ItemCounterConverter}}" Value="true">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock>No items to display</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<!--ListViewItem-->
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="#5076A7" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFFFFF" Offset="0.0"/>
<GradientStop Color="#C0D3EA" Offset="1.0"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel TextElement.FontFamily="Segoe UI" TextElement.FontSize="12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Padding="3,0,0,0" Text="{Binding Betreff}" TextTrimming="CharacterEllipsis" Grid.Column="0" Grid.Row="0"/>
<Button FontSize="7" Content="X" Grid.Column="1" Grid.Row="0"/>
</Grid>
<TextBlock Padding="3,0,0,0" Text="{Binding Kunde}"/>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Padding="3,0,0,0" Text="{Binding Ort}"/>
<TextBlock Padding="3,0,0,0" Text="("/>
<TextBlock Text="{Binding Alternative}"/>
<TextBlock Text=")"/>
</StackPanel>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
Thanks this looks very promising and you understood it right. But I have problems implementing it. Every ListView has a differnt ItemSource(they're all ObservableCollections), so I don't know if I can set the ItemSource inside the Style? But the Button at the End should be available to all of them. My Styles are in a different File than the ListViews themselves. The definition for my ListViews looks like this:
AppointmentOverview.xaml
<ListView Grid.Column="1" Grid.Row="3" ItemsSource="{Binding Mov}"/>
<ListView Grid.Column="1" Grid.Row="4" ItemsSource="{Binding Mon}"/>
<ListView Grid.Column="2" Grid.Row="3" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="2" Grid.Row="4" ItemsSource="{Binding Div}"/>
<ListView Grid.Column="3" Grid.Row="3" ItemsSource="{Binding Miv}"/>
<ListView Grid.Column="3" Grid.Row="4" ItemsSource="{Binding Min}"/>
<ListView Grid.Column="4" Grid.Row="3" ItemsSource="{Binding Dov}"/>
<ListView Grid.Column="4" Grid.Row="4" ItemsSource="{Binding Don}"/>
<ListView Grid.Column="5" Grid.Row="3" ItemsSource="{Binding Frv}"/>
<ListView Grid.Column="5" Grid.Row="4" ItemsSource="{Binding Frn}"/>

wpf Select Multiple ListboxItems(i.e, Images) using Keyboard[Ctrl + RightArrow/leftArrow]

I Have grouped the listbox items,i can able to select "Multiple" items by SelectionMode="Extended" or "Multiple". Now i have got two issues and one more thing in "Sorting"
When
[ SelectionMode="Extended"]
i can select Multiple Items by pressing and selecting the items using Mouse, once i move the mouse to the others controls,i'm losing my selection.
2.I'm unable to select Multiple items using Keyboard and unable to travel to listboxItems(i.e,) "Images" using Arrow Keys.
I want to sort/Arrange the grouped Items.
could anybody guide over these..thnx in advance.
<CollectionViewSource x:Key="CharacterCollectionView"
Source="{Binding}" >
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Name" />
</CollectionViewSource.GroupDescriptions>
<!--<CollectionViewSource.SortDescriptions>
<cm:SortDescription PropertyName="First" />
</CollectionViewSource.SortDescriptions>-->
</CollectionViewSource>
<ItemsPanelTemplate x:Key="HorizontalItemsPanel">
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
<Style x:Key="myListboxStyle">
<Style.Resources>
<!-- Background of selected item when focussed -->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#66000000" Offset="0" />
<GradientStop Color="#33000000" Offset="1" />
</LinearGradientBrush>
<!-- Background of selected item when not focussed -->
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#66000000" Offset="0" />
<GradientStop Color="#33000000" Offset="1" />
</LinearGradientBrush>
</Style.Resources>
</Style>
</Window.Resources>
<DockPanel>
<StackPanel Orientation="Vertical" DockPanel.Dock="Left" Background="#336699" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<ListBox
Margin="20,20,20,5" DataContext="{Binding}"
ItemsSource="{Binding Source={StaticResource CharacterCollectionView}}"
DockPanel.Dock="Top" x:Name="MyList" MouseEnter="MyListEvent"
Width="700" SelectionMode="Extended" Style="{StaticResource myListboxStyle }"
Height="700" Background="LightGray" IsSynchronizedWithCurrentItem="True"
ScrollViewer.CanContentScroll="True" SelectedIndex="1"
ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" PresentationTraceSources.TraceLevel="High" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="Width" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
<Setter Property="Height" Value="{Binding Path=Value, ElementName=sizeSlider, Mode=TwoWay}"/>
<!--<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</Style.Triggers>-->
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Background="LightSteelBlue" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Viewbox Stretch="Fill" HorizontalAlignment="Stretch" >
<Border BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding}" BorderBrush="IndianRed" Margin="0" Height="Auto">
<DockPanel>
<Image
DockPanel.Dock="Top"
Width="150" Margin="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto" x:Name="Myimage"
Source="{Binding Path=ImageFilepath[0]}"/>
<Grid>
<Label Content="{Binding Path=Name[0]}" HorizontalContentAlignment="Center" FontWeight="Normal" FontSize="13" />
</Grid>
</DockPanel>
</Border>
</Viewbox>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" FontSize="18" Height="Auto" Background="Transparent" FontWeight="Medium" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Background="White" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<GroupBox Header="{Binding Name}" BorderBrush="#336699" BorderThickness="2" Margin="5">
<ItemsPresenter />
</GroupBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
<StackPanel Grid.Row="1" HorizontalAlignment="Center" Orientation="Horizontal" Margin="2,0,5,5">
<TextBlock Width="Auto" Text="Min" Foreground="White" FontWeight="Bold" FontSize="14" Margin="2" Padding="0" HorizontalAlignment="Right" />
<Slider
Name="sizeSlider"
Width="300" Orientation="Horizontal"
Value="200" Background="PowderBlue"
IsSnapToTickEnabled="True"
Minimum="150" Maximum="250"
TickPlacement="BottomRight"
TickFrequency="50"
AutoToolTipPrecision="10"
AutoToolTipPlacement="TopLeft"
IsDirectionReversed="False"
IsMoveToPointEnabled="False" />
<TextBlock Width="Auto" Text="{Binding Value, ElementName=sizeSlider}" Foreground="White" FontWeight="Bold" FontSize="14" Margin="2" Padding="0" />
</StackPanel>

Alternate background color in Listview XAML

I'm using a listView based on itemTemplate.
So i need in my template to alternate the background color :
- fist row: white
- second row:gray
- third row: white
- forth: gray
this is my template:
<DataTemplate x:Key="ItemFlight" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="#28AADB" Margin="2">
<Image Source="{Binding Path=IsArrival, Converter={StaticResource BooleanToImageDisplayConverter}}" Width="30" Height="30" VerticalAlignment="Center" Margin="5"/>
</Border>
<Grid Grid.Column="1" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding FlightName}" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalOrDepartDateTime, Converter={StaticResource DateTimeConverter}}" FontWeight="Bold" Grid.Column="0" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="1" Grid.Row="0" Margin="10" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding DepartureTime}" Grid.Column="1" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding CityInfo.Name}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityReverseConverter}}"/>
<TextBlock Text="{Binding Terminal, Converter={StaticResource StringUpperConverter}}" Visibility="{Binding Path=IsArrival,Converter={StaticResource BooleanToVisibilityConverter}}" Grid.Column="2" Grid.Row="0" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding ArrivalTime}" Grid.Column="2" Grid.Row="1" Margin="10" Style="{StaticResource MyTextBlockStyle}"/>
<TextBlock Text="{Binding Status}" Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Margin="15" Style="{StaticResource MyTextBlockStyle}" Foreground="#EA6A1E" FontSize="20" TextWrapping="Wrap" />
</Grid>
</Grid>
</DataTemplate>
How Can I do this please??
I tried this and it works for me.
<Window x:Class="TryResponses.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:TryResponses"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<vm:MainWindowViewModel x:Key="MainWindowViewModel" />
</Window.Resources>
<Grid Background="LightGray" DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate DataType="system:String">
<!-- put your data template here -->
</DataTemplate>
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" />
</Grid>
I hope this will help.
Regards
Claude
You should use AlternationCount property and it works on ListBox,ListView or any other control that inherits from ItemsControl.
The property definition and two examples are included at
https://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.alternationcount%28v=vs.110%29.aspx)
To view more clearly the selected lines, you can try this : (don't take care about the colors and final render, i've not spent the necessary time to make it sexy)
<Grid DataContext="{StaticResource MainWindowViewModel}">
<Grid.Resources>
<local:FalseToCollapsedConverter x:Key="FalseToCollapsedConverter" />
</Grid.Resources>
<ListView ItemsSource="{Binding Items}" AlternationCount="2" HorizontalContentAlignment="Stretch">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="line">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding .}" Margin="4" />
<TextBlock Grid.Column="1" Text="V" Margin="4" Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
<Border Grid.ColumnSpan="2" Background="#5500FF00"
BorderBrush="Blue" BorderThickness="2"
Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem, Mode=FindAncestor}, Converter={StaticResource FalseToCollapsedConverter}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter TargetName="line" Property="Background" Value="#CCCCFF" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="line" Property="Background" Value="#CCFFCC" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
</ListView>
</Grid>

How to make usercontrol take whole space of the region its injected into

I have a view which is injected into an region (Itemscontrol). The view only takes up space in the region depending on content size. I want that the view streches for whole height of the region. Here is code of my view:
<UserControl x:Name="userControl" x:Class="DishPromo.Modules.Payments.SideCart.SideCartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:infUIFramework="clr-namespace:DishPromo.Infrastructure.UIFramework;assembly=DishPromo.Infrastructure"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Convert="clr-namespace:DishPromo.Modules.Payments.SideCart"
mc:Ignorable="d" >
<UserControl.Resources>
<Convert:ObjectToStringConverter x:Key="ToString" />
<Convert:BooleanToVisibilityConverter x:Key="ToVisibility" />
<Convert:WOMsgVisibilityConverter x:Key="WOMsgVisibility" />
<Convert:WorkOrderMsgConverter x:Key="WorkOrderMsg" />
<Convert:RescheduleValueConverter x:Key="ValueConverter" />
<Convert:PaymentAmountDueNow x:Key="PaymentAmountDueNow" />
<Style TargetType="Button" x:Key="hotkeyStyle">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="25"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Border Name="border"
Padding="4,2" CornerRadius="3"
BorderBrush="DarkGray"
/>
<Rectangle x:Name="FVElement" Stretch="Fill" StrokeLineJoin="Miter" StrokeThickness="0.5" Opacity="0" RadiusX="2" RadiusY="2"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="{StaticResource {x:Static SystemColors.ControlLightLightBrushKey}}" Stroke="{StaticResource OEFlowButtonBorderStyle}"
>
</Rectangle>
<Rectangle x:Name="Background" StrokeLineJoin="Miter" StrokeThickness="0.5" Opacity="1" Margin="2" RadiusX="3" RadiusY="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="{StaticResource {x:Static SystemColors.ControlColorKey}}" Offset="0.576" />
<GradientStop Color="{StaticResource {x:Static SystemColors.ControlLightLightColorKey}}" Offset="0" />
<GradientStop Color="{StaticResource {x:Static SystemColors.ControlColorKey}}" Offset="1" />
<GradientStop Color="{StaticResource {x:Static SystemColors.ControlLightColorKey}}" Offset="0.262" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,-1.85" StartPoint="0.5,1.5">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Path x:Name="WhiteBand" Height="4.25" Stretch="Fill" StrokeLineJoin="Miter" Fill="{StaticResource OEFlowButtonWhiteBandFillStyle}"
Data="M4.2160064,2.75 C4.2160064,1.6454305 5.1114369,1.7153466 6.2160064,1.7153466 L22.679308,1.7153466 C23.783877,1.7153466 24.679308,1.6454305 24.679308,2.75 24.679308,2.75 4.2160064,2.75 4.2160064,2.75 z"
Margin="7,4,7,0" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Light"
TextWrapping="WrapWithOverflow" Text="{TemplateBinding Content}" x:Name="btnName" >
</TextBlock>
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FF585151" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FF219921" Offset="0.35"/>
<GradientStop Color="#FF216B99" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform" >
<Setter.Value>
<TranslateTransform Y="0.5" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Opacity" Value="0.3" />
<Setter TargetName="Background" Property="Opacity" Value="0.3" />
<Setter TargetName="FVElement" Property="Opacity" Value="0.3" />
<Setter TargetName="btnName" Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<DockPanel VerticalAlignment="Stretch" LastChildFill="True" >
<DockPanel.InputBindings>
<KeyBinding Command="{Binding MinPaymentOverride}" Gesture="SHIFT+CTRL+y"></KeyBinding>
<KeyBinding Command="{Binding PIAMinPaymentOverride}" Gesture="SHIFT+CTRL+m"></KeyBinding>
<KeyBinding Command="{Binding EFTOverride}" Gesture="SHIFT+CTRL+e"></KeyBinding>
<KeyBinding Command="{Binding CCOverride}" Gesture="SHIFT+CTRL+c"></KeyBinding>
<KeyBinding Command="{Binding OverrideCC}" Gesture="SHIFT+CTRL+c"></KeyBinding>
<KeyBinding Command="{Binding OverrideSSN}" Gesture="SHIFT+CTRL+s"></KeyBinding>
<KeyBinding Command="{Binding OverrideCertificate}" Gesture="SHIFT+CTRL+j"></KeyBinding>
<KeyBinding Command="{Binding OverrideSellingAgent}" Gesture="SHIFT+CTRL+d"></KeyBinding>
<KeyBinding Command="{Binding OverrideRefCompany}" Gesture="SHIFT+CTRL+i"></KeyBinding>
<KeyBinding Command="{Binding OverrideSellingCompany}" Gesture="SHIFT+CTRL+n"></KeyBinding>
</DockPanel.InputBindings>
<DockPanel.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding ChangeFocus}" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=SidecartRemove}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
<!--<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>-->
<DockPanel x:Name="dpNotificationArea" Margin="0" VerticalAlignment="Bottom" AllowDrop="True" LastChildFill="True" >
<!--<Grid.RowDefinitions>
<RowDefinition MinHeight="350" />
<RowDefinition Height="29"/>
<RowDefinition Height="58"/>
<RowDefinition Height="27"/>
</Grid.RowDefinitions>-->
<Grid Grid.Row="3" VerticalAlignment="Bottom" DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="260"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Width="Auto" FontWeight="Bold" Foreground="Red">
<MultiBinding Converter="{StaticResource PaymentAmountDueNow}">
<Binding Path="CustomerModel.AccountInfo.Pricer.PaymentRequired"/>
<Binding Path="CustomerModel.AccountInfo.AccountStatus"/>
</MultiBinding>
</Label>
<StackPanel Grid.Column="1" x:Name="spPricerActionBar" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Style="{StaticResource hotkeyStyle}" Width="80" x:Name="SidecartRemove" Command="{Binding RemoveCartItem}"
IsEnabled="{Binding CustomerModel.ControlStatus.RemoveIsEnabled}" GotFocus="SidecartRemove_GotFocus">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Light"><Run Text="Re"/><Underline><Run Text="m"/></Underline><Run Text="ove"/></TextBlock>
</Button>
<Button x:Name="btnFeeWaived" Width="80" Content="Fees Waived" IsEnabled="{Binding IsFeeWaivedEnabled}"
Command="{Binding ShowBattery}" GotFocus="btnFeeWaived_GotFocus" />
<Button Width="100" Content="Price It" HorizontalAlignment="Right" Visibility="{Binding PriceItVisibility}" Command="{Binding GetPricing}" Background="#FF6633" Style="{StaticResource PriceItStyle}"/>
</StackPanel>
</Grid>
<StackPanel x:Name="spWorkOrder" Grid.Row="2" VerticalAlignment="Bottom" DockPanel.Dock="Bottom">
<Grid Margin="0,0,0,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Bottom">
<Button Width="70" Height="25" x:Name="btnReschedule1" Content="Reschedule" HorizontalAlignment="Right" Command="{Binding GetInstallDates}" CommandParameter="1"
Visibility="{Binding CustomerModel.AccountInfo.ScheduleInfo, ConverterParameter=1, Converter={StaticResource ToVisibility}}" />
<Button Width="70" x:Name="btnReschedule0" Content="Reschedule" HorizontalAlignment="Right" Command="{Binding GetInstallDates}" CommandParameter="0"
Visibility="{Binding CustomerModel.AccountInfo.ScheduleInfo, ConverterParameter=0, Converter={StaticResource ToVisibility}}" />
</StackPanel>
<StackPanel Grid.Column="0" VerticalAlignment="Bottom">
<Label Margin="0,5,0,5" Content="{Binding CustomerModel.AccountInfo.WorkorderInfo.DisconnectDate, Converter={StaticResource WorkOrderMsg}}"
HorizontalAlignment="Left" FontWeight="Bold" Foreground="Blue" Visibility="{Binding CustomerModel.AccountInfo.WorkorderInfo.DisconnectDate, ConverterParameter=0, Converter={StaticResource WOMsgVisibility}}" VerticalAlignment="Center"/>
<Label Margin="0,5,0,5" Content="{Binding CustomerModel.AccountInfo.ScheduleInfo[1], Converter={StaticResource ValueConverter}}"
HorizontalAlignment="Left" FontWeight="Bold" Foreground="Blue" Visibility="{Binding Visibility, ElementName=btnReschedule1}" VerticalAlignment="Center"/>
<Label Margin="0,5,0,5" Content="{Binding CustomerModel.AccountInfo.ScheduleInfo[0], Converter={StaticResource ValueConverter}}"
HorizontalAlignment="Left" FontWeight="Bold" Foreground="Blue" Visibility="{Binding Visibility, ElementName=btnReschedule0}" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</StackPanel>
<StackPanel x:Name="NetworkQualification" Grid.Row="1" Margin="4,0,0,0" VerticalAlignment="Bottom" DockPanel.Dock="Bottom">
<TextBlock x:Name="txtbNetQualStatus" Text="{Binding CustomerModel.ServiceAddress.NetQualResult}" Foreground="Blue" FontWeight="Bold" />
<TextBlock x:Name="txtDupAddress" Text="{Binding CustomerModel.ServiceAddress.NoAddressFound}" Foreground="Blue" FontWeight="Bold"/>
</StackPanel>
<ListView Grid.Row="0" Name="lstSideCart" ScrollViewer.HorizontalScrollBarVisibility="Auto" DockPanel.Dock="Top"
ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding CustomerModel.AccountInfo.Services}" SelectionMode="Extended"
SelectionChanged="lstSideCart_SelectionChanged" MaxHeight="781" VerticalContentAlignment="Stretch" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Foreground" Value="{Binding Path=ForegroundColor}"/>
<Setter Property="FontWeight" Value="{Binding Path=FontWeight}"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="DarkGray" Offset="0.0" />
<GradientStop Color="DarkGray" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0,0,0,0.5"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ContextMenu>
<ContextMenu ItemsSource="{Binding ContextMenuList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Path=Header}" CommandParameter="{Binding}"
Click="MenuItem_Click" Visibility="{Binding Path=IsVisible}" Height="16"/>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListView.ContextMenu>
<ListView.View>
<GridView>
<GridViewColumn Width="175" Header="Service Code Name" DisplayMemberBinding="{Binding Description}" />
<GridViewColumn Width="100" Header="Service Type" DisplayMemberBinding="{Binding ServiceCode.SecondaryServiceTypeSingle.ServiceTypeName}"/>
<GridViewColumn Width="25" Header="#" DisplayMemberBinding="{Binding CurrentQuantity}"/>
<GridViewColumn Width="68" Header="Added" DisplayMemberBinding="{Binding Path=DateAdded, StringFormat={}{0:MM/dd/yy}}"/>
</GridView>
</ListView.View>
</ListView>
</DockPanel>
</DockPanel>
What's the ItemsPanelTemplate of your ItemsControl?
The default is a StackPanel, which won't automatically stretch its child elements to the maximum allowed size.
You'll either have to set HorizontalAlignment to Stretch in the ItemsContainerStyle, or change the ItemsPanelTemplate to something that automatically stretches its children.
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</ItemsControl.ItemContainerStyle>
How about using a UniformGrid for your ItemsPanelTemplate like so
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Also, StackPanels by their definition only take up space according to the content which exists, so saying something like VerticalAlignment="Stretch" won't stretch the contents of the StackPanel throughout the parent container.
Try to use a Grid as the layoutroot of your usercontrol and dont set the width and height.

Resources