We Keep Coding

WPF Grids inside ListView and header appear have inconsistent sizes

I have grids in List View item template and in a header grid. This is a the code for that section.
`
<!--Products listview headers-->
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Order No"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1"
Text="Customer"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Column="2"
Text="Total"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<Border Style="{StaticResource HRule}" />
<!--Products listview-->
<ListView x:Name="listView"
ItemsSource="{Binding SalesOrders}"
SelectedItem="{Binding SelectedSalesOrder, Mode=TwoWay}"
SelectionMode="Single"
Padding="0"
Margin="0">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
<!-- Background of selected item when focussed -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightCyan"/>
<!-- Background of selected item when not focussed -->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="LightGray" />
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type entities:SalesOrder}">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding No, StringFormat={StaticResource serialNoFormat}}"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1"
Text="{Binding Customer.Name}"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Column="2"
Text="{Binding Total, StringFormat={StaticResource currencyFormat}}"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>`
Currently the columns do not align in the header and the rows. It currently looks like this.
I could not find the reason for the misalignment.
I tried setting the padding and margin of the listview to 0. But it did not work. I tried shared size scoping for the grids but did not have any luck either.

Rather than using Grid and List View utilise GridView with your ListView.
So:
<ListView>
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="Order No">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding No, StringFormat={StaticResource serialNoFormat}}"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Customer">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Customer.Name}"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Total">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
Text="{Binding Total, StringFormat={StaticResource currencyFormat}}"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
Give this a go and see if it does what you need it to do.

Add Styling to First Item in ListView XAML

I have a ListView as such:
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This listview sets up each row to have a Label and Checkbox as included above. What I want to do is add styling so that the first item in the listview has a different color background so that it distinguishes the start of the listview items.
I have tried adding this ItemContainerStyle, which works in changing the color of the first item, but it affects the styling of the borderbrush and checkbox alignment.
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="0">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center" />
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Background" Value="Blue" />
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Is there a way to change this xaml so that the Checkbox styling is as used in the DataTemplate?

In your source Data "SourceItems" can you add a property
public Color BackgroundColorValue { get; set; }
And set it while the data is fetched from the source.
Then bind the background property directly
<ListView ItemsSource="{Binding SourceItems}" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1, 1, 0, 0">
<Grid Background={Binding BackgroundColorValue}>
<Label Content="{Binding PropertyName}" FontSize="15"/>
<CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Listview double click problem in wpf caliburn micro

In my project I use list view and want to get the object from double click event,
I mean when user click on listview row, then from viewmodel I want to get the clicked object.
XAML:
cal:Message.Attach="[Event MouseDoubleClick] = [Action RowDoubleClick($dataContext)]"
ViewModel
public void RowDoubleClick(object pm)
{
}
but in object pm in ViewModel I get all off the listview object, I need a single object.
Can anyone help me regarding this issue.
XAML
<ListView AlternationCount="2" HorizontalAlignment="Center" cal:Message.Attach="[Event MouseDoubleClick] = [Action RowDoubleClick($dataContext)]"
Name="lvProcessList" SelectionChanged="lvProcessList_SelectionChanged"
ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True"
VerticalAlignment="Top" Width="779" Grid.ColumnSpan="8" IsSynchronizedWithCurrentItem="True" Height="391" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
<Setter Property="Height" Value="30" />
<Setter Property="IsSelected" Value="{Binding chkWspSelect}"/>
<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>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="SteelBlue"/>
</Trigger>
</Style.Triggers>
<!--<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListViewItem_PreviewMouseLeftButtonDown" />-->
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn>
<DataGrid AutoGenerateColumns="True" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTemplateColumn >
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<CheckBox Name="chkWspSelectAll" HorizontalAlignment="Center" VerticalAlignment="Center" Checked="chkWspSelectAll_Checked" Unchecked="chkWspSelectAll_Unchecked" IsThreeState="False"/>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<GridViewColumn.CellTemplate >
<DataTemplate>
<CheckBox Name="chkWspSelect" HorizontalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Checked="chkWspSelect_Checked" Unchecked="chkWspSelect_Unchecked" IsThreeState="False"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="200" Header="Process name">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding ProcessName}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="120" Header="Ongoing">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Ongoing}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="110" Header="Un-Strated">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Un-Strated}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="110" Header="Completed">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Completed}" TextAlignment="Center"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="200" Header="Action" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<WrapPanel >
<Button Width="50" Height="25" Margin="30,0,0,0" x:Name="btnDelete" Click="BtnDelete_Click">
<StackPanel Orientation="Horizontal" >
<Image Source="/Pipe_Flushing;component/Image/Trash.png" Height="20"/>
</StackPanel>
</Button>
<Button x:Name="btnHistory" Width="50" Height="25" Margin="10,0,0,0" Click="BtnHistory_Click">
<StackPanel>
<Image Source="/Pipe_Flushing;component/Image/History.png" Height="20"/>
</StackPanel>
</Button>
<Button x:Name="btnHistory1" Width="50" Height="25" Margin="10,0,0,0" Content="test" cal:Message.Attach="[Event Click] = [Action Edit($dataContext)]">
</Button>
</WrapPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>

WPF Data trigger to apply label and child?

i have the following xaml where if Status is OK then label background is green, and if ERROR label background in red, this works fine for the parent label, but when i add a child i also want that to adopt the parent background color? is there a way to allow the datatrigger to act for both parent and child labels ?
heres the xaml
<Window x:Class="wpfdemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:wpfdemo"
mc:Ignorable="d"
Title="MainWindow" Height="50" Width="50" SizeToContent="WidthAndHeight" ResizeMode="NoResize" Topmost="True" AllowsTransparency="True" WindowStyle="None" Background="Transparent">
<ItemsControl ItemsSource="{Binding Path=Parents}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:Parent}">
<Grid>
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="Click Me" Click="Button_Click" />
</ContextMenu>
</Grid.ContextMenu>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="ParentColumn" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Parent label -->
<Label Content="{Binding Path=Name}"
x:Name="Label" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Black" BorderThickness="1" FontFamily="Verdana" Foreground="White"/>
<!-- Errors -->
<ItemsControl ItemsSource="{Binding Path=Errors}"
Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:Child}">
<Label Content="{Binding Path=Name}"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="Black" BorderThickness="1" FontFamily="Verdana" Foreground="White"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<DataTemplate.Triggers>
<!-- Parent is ok -->
<DataTrigger Binding="{Binding Path=Status}"
Value="OK">
<Setter TargetName="Label" Property="Background" Value="#BF008000" />
</DataTrigger>
<!-- Parent is error -->
<DataTrigger Binding="{Binding Path=Status}"
Value="ERROR">
<Setter TargetName="Label" Property="Background" Value="#BFFFFF00" />
<Setter TargetName="Label" Property="Foreground" Value="Black" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks

TargetName is control's name,not type.
try :
<DataTemplate >
<Label x:Name="ChildLabel" Content="{Binding Path=Name}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=DataContext.Status,RelativeSource={ RelativeSource Mode=TemplatedParent}}" Value="OK">
<Setter TargetName="ChildLabel" Property="Background" Value="#BF008000" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Use single Template for multiple Item Sources and render separate combobox in UI

I am new to WPF/XAML so I am stuck in one problem is it possible that if I create one TEMPLATE of combobox in UI and what if is it possible to use one ComboBox to render multi-item sources? For example, I have two item sources A and B and in XAML I have one common template. So is it possible that I can create two different ComboBox in UI for A and B from single template?
I am using below template for creation
<ComboBox x:Name="comboboxtemplate" ItemsSource="{Binding CboItemsource}" SelectedItem="{Binding comboboxSelecteditem, Mode=TwoWay}"
Visibility="{Binding ShowCombobox, UpdateSourceTrigger=PropertyChanged}" Width="{Binding ComboboxWidth, UpdateSourceTrigger=PropertyChanged}"
IsEnabled="{Binding FieldValueIsEditable, UpdateSourceTrigger=PropertyChanged}"
IsTextSearchCaseSensitive="False"
IsTextSearchEnabled="True"
TextSearch.TextPath="Description">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Code}" Width="0"/>
<TextBlock Text= "{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

You could create a style that you apply to both ComboBoxes, .e.g.:
<Window x:Class="WpfApplication1.Window1"
...>
<Window.Resources>
<Style x:Key="cmbStyle" TargetType="ComboBox">
<Setter Property="Visibility" Value="{Binding ShowCombobox, UpdateSourceTrigger=PropertyChanged}" />
<Setter Property="IsEnabled" Value="{Binding FieldValueIsEditable, UpdateSourceTrigger=PropertyChanged}" />
<Setter Property="IsTextSearchEnabled" Value="True" />
<!-- ... -->
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Code}" Width="0"/>
<TextBlock Text= "{Binding Description}" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<ComboBox x:Name="cmb1" ItemsSource="{Binding CboItemsource}"
SelectedItem="{Binding comboboxSelecteditem, Mode=TwoWay}"
Style="{StaticResource cmbStyle}" />
<ComboBox x:Name="cmb2" ItemsSource="{Binding OtherItemsource}"
SelectedItem="{Binding OtherSelecteditem, Mode=TwoWay}"
Style="{StaticResource cmbStyle}" />
</StackPanel>
</Window>