Develop Reference

Margin or padding between column and different ItemContainerStyle for group columns

I was commissioned to make a window according to this design:
I chose the ListView container for it. How to make textboxes in cells is clear, but not how to implement indents between columns and different colors for rows. Nothing comes to my mind.
How can I do it?

I'd use a listbox with a grid and columns in the itemtemplate.
Make the header line a separate grid, with matching columns.
If variable widths are necessary on the columns, use Sharedsizegroup to make the columns in your header.
You can then put borders in a row, with columnspan and cornerradius to round them off.
Textboxes declared later in the xaml will get higher z-index and appear on top.
If you want a gap, no problem, you can have a column with nothing in it.
Here's some markup I have to hand which uses this sort of principle. You edit in a separate row, append each item. So it kind of looks like it's a datagrid but I have fine control over everything and in particular an explicit point to validate.
<StackPanel Grid.Row="1" Grid.IsSharedSizeScope="True">
***** Top Grid is headers *************
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="DarkSlateGray"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition Width="Auto" SharedSizeGroup="B" MinWidth="220"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G" MinWidth="120"/>
</Grid.ColumnDefinitions>
<TextBlock Text="NG"
TextAlignment="Center"
MinWidth="30"
/>
<TextBlock Text="Description" Grid.Column="1"/>
<TextBlock Text="Per" Grid.Column="2"/>
<TextBlock Text="Quantity" Grid.Column="3"/>
<TextBlock Text="Nett" Grid.Column="4"/>
<TextBlock Text="VAT" Grid.Column="5"/>
<TextBlock Text="Gross" Grid.Column="6"/>
</Grid>
********** Listbox for rows
<ListBox ItemsSource="{Binding TransactionLines}"
BorderThickness="0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="H"/>
</Grid.ColumnDefinitions>
<TextBlock Width="20" HorizontalAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="G"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsNettEntry}" Value="True">
<Setter Property="Text" Value="N"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="{Binding Description}" Grid.Column="1"/>
<TextBlock Text="{Binding NettPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}"
Background="LightYellow"
/>
<TextBlock Text="{Binding GrossPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}"
Background="#D6EAF8"
/>
<TextBlock Text="{Binding Quantity}" Grid.Column="3"/>
<TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/>
<TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/>
<TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/>
<Button Grid.Column="7"
Command="{Binding DataContext.RemoveLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
CommandParameter="{Binding}"
>
<Path Data="{StaticResource Bin}"
Fill="Gray"
Stretch="Uniform"/>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
****** Another grid is used to enter a new line.
<Grid DataContext="{Binding NewLine}">
<Grid.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}">
<Setter Property="Background" Value="#F2F3F4 "/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="H"/>
</Grid.ColumnDefinitions>
<ToggleButton IsChecked="{Binding IsNettEntry, Mode=TwoWay}"
Grid.Column="0"
PreviewMouseLeftButtonDown="ToggleButton_PreviewMouseLeftButtonDown"
>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content" Value="G"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="N" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<TextBox Text="{Binding Description}" Grid.Column="1"
x:Name="DescriptionTextBox"
/>
<TextBox Text="{Binding NettPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}"
Background="LightYellow"
>
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBox Text="{Binding GrossPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}"
Background="#D6EAF8"
>
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBox Text="{Binding Quantity}" Grid.Column="3">
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/>
<TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/>
<TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/>
<Button Grid.Column="7"
Margin="6,2,2,2"
Command="{Binding DataContext.AddLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
PreviewKeyDown="Button_PreviewKeyDown"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
>
<TextBlock Text="Add"/>
</Button>
</Grid>
</StackPanel>

WPF: Content of round-cornered border not being round-cornered

I have a round-cornered border and I am trying to make its contents to be also round-cornered but my attempts are not working. Basically I am doing a kind of custom MessageBox but simpler, only with one image icon, a text and a button. No title bar. Image icon is changing depending on the type of message.
Stackpanel corners overlaps over border so border corners are not showing rounded.
ATTEMPT #1:
<Border x:Name="MyCustomMessageBox"
CornerRadius="5,5,5,5"
Grid.ZIndex="3"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue" BorderThickness="1"
Background="White">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid Background="Blue">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="WhiteSmoke">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>
ATTEMPT #2:
As explained here, I have tried also but without success.
<Grid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyCustomMessageBox}" />
</Grid.OpacityMask>
<!-- Here goes all the above border code -->
</Grid>

The following should solve your issue.
<Border x:Name="MyCustomMessageBox"
CornerRadius="5"
Visibility="{Binding IsMessageBoxShown, Mode=TwoWay, Converter={StaticResource BoolToVis}}"
Width="auto" Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="DarkBlue"
BorderThickness="1"
Background="blue">
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
<Grid> <!-- removed the Background here. Only letting borders provide background. -->
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
Added a border to fill the top part of the grid with the
whitesmoke color using a borderradius on the top.
Also note that the Background from the stackpanel was removed.
-->
<Border
Grid.Row="0" Grid.Column="0"
Name="mask"
Background="WhiteSmoke"
CornerRadius="5,5,0,0"
/>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Grid>
<Image VerticalAlignment="Center" HorizontalAlignment="Left"
Source="/Common.MyImages;component/Images/Info.png"
Height="48" Width="48" Margin="20,10">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Info.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MsgType}" Value="1">
<Setter Property="Source" Value="/Common.MyImages;component/Images/Error.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
<TextBlock Width="280" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Left"
Background="Transparent" FontSize="12" TextWrapping="Wrap"><Run Text="This is a message"/>
</TextBlock>
</StackPanel>
<Button x:Name="btnCustomMessageBox" Grid.Row="1" Grid.Column="0"
Click="btnCustomMessageBox_Click"
HorizontalAlignment="Center" Margin="10" Width="80" Content="Ok" Visibility="Visible"/>
</Grid>
</Border>

ListBox HorizontalContentAlignment = Stretch does not work correctly

I created a "ListBox" and set "HorizontalContentAlignment" property to "Strecth".
But, sometimes, when scrolling, "HorizontalContentAlignment" not working.
I do not understand what the cause of the problem.
.
My code:
<ListBox
Name="ListBoxTracks"
Grid.Row="0"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding MusicManager.TracksCollection, IsAsync=True}"
ScrollViewer.CanContentScroll="True"
ScrollViewer.IsDeferredScrollingEnabled="True"
SelectedItem="{Binding MusicManager.CurrentTrack, Mode=OneWayToSource}"
VirtualizingPanel.CacheLength="1,1"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding MusicManager.GetTracksCollectionCommand}" CommandParameter="{Binding Path=ItemsSource, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewMouseDoubleClick">
<i:InvokeCommandAction Command="{Binding MusicManager.InitPlayCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type playable:LocalPlayable}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<fa:ImageAwesome
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="16"
Height="16"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
Icon="Music" />
<TextBlock
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="5,5,5,0"
HorizontalAlignment="Left"
FontSize="12"
TextTrimming="WordEllipsis">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} - {1}">
<Binding Path="Artist[0].Name" />
<Binding Path="Title" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock
Grid.Row="0"
Grid.Column="3"
Margin="5,5,5,0"
HorizontalAlignment="Right"
FontSize="12">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0:00}:{1:00}">
<Binding Path="Duration.Minutes" />
<Binding Path="Duration.Seconds" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="5,0,5,0"
HorizontalAlignment="Left"
FontSize="12"
Text="{Binding Converter={StaticResource TrackAttributesConverter}}" />
<materialDesign:RatingBar
Grid.Row="1"
Grid.Column="3"
Margin="5,0,5,0"
HorizontalAlignment="Right"
Max="5" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock
Margin="15,5,15,5"
HorizontalAlignment="Left"
Foreground="{DynamicResource MaterialDesignBody}"
FontSize="16"
Text="{Binding Path=Name}" />
<TextBlock
Margin="15,5,15,5"
HorizontalAlignment="Right"
Foreground="{DynamicResource MaterialDesignBody}"
FontSize="16"
Text="{Binding Path=ItemCount, StringFormat=Songs:{0:F0}}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle
Grid.Row="0"
Height="1"
HorizontalAlignment="Stretch"
Stroke="{DynamicResource MaterialDesignBody}" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Width="120">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<myControls:ImageProviderViewer
Grid.Row="0"
Width="120"
Height="120"
VerticalAlignment="Top"
HidePlaceholderAtBeginning="True"
HighPriorityImage="True"
ImageProvider="{Binding Items[0].Album.Cover}">
<myControls:ImageProviderViewer.Placeholder>
<Viewbox Width="110" Height="110">
<Path Fill="Gray" Data="{StaticResource VectorMicrophone}" />
</Viewbox>
</myControls:ImageProviderViewer.Placeholder>
</myControls:ImageProviderViewer>
<TextBlock
Grid.Row="1"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Artist[0].Name}"
TextTrimming="WordEllipsis" />
<TextBlock
Grid.Row="2"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Album.Name}"
TextTrimming="WordEllipsis" />
<TextBlock
Grid.Row="3"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Album.FirstReleaseDate}"
TextTrimming="WordEllipsis" />
</Grid>
<Rectangle
Grid.Column="1"
Width="1"
VerticalAlignment="Stretch"
Stroke="{DynamicResource MaterialDesignBody}" />
<ItemsPresenter Grid.Column="2" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>

Sounds like you want to stretch the ListBoxItems, not the ListBox itself.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>

WPF data binding to a parent property inside HierarchicalDataTemplate

I have the following data template in my listbox:
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF575757" BorderThickness="0,0,0,1">
<Grid HorizontalAlignment="Stretch" Tag="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" SharedSizeGroup="Name"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="DeviceIcon" DataContext="{Binding Path=device}" Source="{Binding Path=StatusIcon}" Width="64" Height="64" Grid.Column="0" Grid.RowSpan="2" RenderOptions.BitmapScalingMode="HighQuality" Margin="3"></Image>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="DeviceName" DataContext="{Binding Path=device}" Text="{Binding Path=DeviceName}" FontWeight="Bold" Foreground="#FF00008F" FontSize="14.667"/>
<TextBlock x:Name="PluginName" Text="{Binding Path=PluginName}" />
</StackPanel>
<Menu x:Name="MainMenu" VerticalAlignment="Top" Padding="0,3" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding deviceMenu}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Items}">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Image Source="{Binding Icon}" Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Icon}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
<Menu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding ClickCommand}" />
<Setter Property="CommandParameter" Value="{Binding device}" />
</Style>
</Menu.ItemContainerStyle>
</Menu>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
The MenuItem's are bound to a property named deviceMenu in the root object. But the root object also contains a property called device which needs to be mapped to the CommandParameter property.
So how do I reach up and out of deviceMenu back to the parent object to access its properties?

Blame it on fatigue... The answer was pretty simple:
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=DataContext.device}" />

Creating two identical looking TabItems but with different bindings

I'm workin on a program, which offers a easy to use interface to edit config-files. The config-files contain two sections which are loadeded into two different lists.
Now the two lists should visually appear the same(like above), without replicating the code if possible, so that I dont have the same code twice and only the binding differs. I'm working with the MVVM-Pattern and thats the XAML-Code for the TabItem:
<TabItem Header="Windows">
<Grid Background="#FFE5E5E5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Label Grid.Row="1" Grid.Column="1" Content="Kreditoren Software"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="135,0,0,0" HorizontalAlignment="Right">
<Label.Content>
<Binding Path="CfgVersion"/>
</Label.Content>
<Label.ContentStringFormat>
File-Version: {0}
</Label.ContentStringFormat>
</Label>
<Border Background="{StaticResource BrushC1}" BorderThickness="1" BorderBrush="{StaticResource BrushC6}"
HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" >
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentControl
Grid.Column="0"
Content=""
Foreground="{StaticResource BrushC7}"
Effect="{StaticResource ShadowS11}"
Margin="0"
Style="{StaticResource ico_search}"
Height="{StaticResource IconHeight}"
Width="{StaticResource IconWidth}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
IsTabStop="False"
TabIndex="-1"/>
<TextBox Grid.Column="1" Height="20" Width="Auto" Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" BorderThickness="0" Margin="0,4" GotFocus="TextBox_GotFocus"/>
</Grid>
</Border>
<ListView x:Name="Kred_ListView" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,5" ItemsSource="{Binding Kreditoren, Mode=OneWay}" SelectedItem="{Binding SelectedKreditor, Mode=TwoWay}" MouseLeftButtonDown="MouseClick">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="behavior:ListViewBehavior.IsBroughtIntoViewWhenSelected" Value="true"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.IsListEditable}" Value="True"/>
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsSelected}" Value="true"/>
</MultiDataTrigger.Conditions>
<Setter Property="behavior:ListViewBehavior.IsBroughtIntoViewWhenSelected" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock>
<Hyperlink Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.RemoveKreditorCommand}">
<Image Grid.Column="0" Height="20" Source="/S-Param;component/Resources/delete.png" Margin="5,0"/>
</Hyperlink>
</TextBlock>
<Border Grid.Column="1" BorderThickness="1" BorderBrush="Black">
<TextBox Height="18" Text="{Binding Name, Mode=TwoWay}" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0,5"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Button Grid.Row="4" Grid.Column="1" Content="Bearbeiten" Visibility="{Binding IsEditButtonVisible}" Margin="100,0,10,0" Command="{Binding EditCommand}"/>
<Button Grid.Row="4" Grid.Column="2" Content="Speichern" Visibility="{Binding IsEditButtonVisible}" Margin="0" Command="{Binding SaveCommand}"/>
<Button Grid.Row="4" Grid.Column="2" Content="Übernehmen" Visibility="{Binding IsSaveListButtonVisible}" Margin="0" Command="{Binding SaveListCommand}"/>
<Button Grid.Row="4" Grid.Column="1" Content="Neu..." Visibility="{Binding IsSaveListButtonVisible}" Margin="100,0,10,0" Command="{Binding AddKreditorCommand}"/>
</Grid>
</TabItem>
If further Information is required I'll try to append them.
If there are grammar or spelling errors, feel free to correct them.