Creating two identical looking TabItems but with different bindings - c#

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.

Related

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>

Set TabControl SelectedIndex from child button

There is a list in which the item style is overridden as a TabControl with multiple buttons on individual TabItems.
How to specify in the button parameters to change the SelectedIndex of the parent element, thereby switching to another menu?
I do to simulate a multi-level context menu for list items.
the standard context menu in ListBox does not suit me
<ListBox.Resources>
<DataTemplate DataType="{x:Type econemodels:DishDTOAdvance}">
<StackPanel>
<Grid Width="280">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
TextTrimming="CharacterEllipsis"
Width="230">
<Run Text="{Binding Quantity}" />
<Run Text="x" />
<Run Text="{Binding DishDTO.Name}" />
</TextBlock>
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
Text="{Binding DishDTO.CostPrice}"
Margin="0,0,10,0" />
<TabControl Name="designerContent"
Visibility="Collapsed"
Grid.Row="1"
Background="Transparent"
BorderThickness="0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem"></ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#FF5DDF5D"
Command="{Binding RelativeSource={RelativeSource
AncestorType={x:Type
local:OrderDish}}, Path=DataContext.AddEditDish}" CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Edit]</Label>
</Button.Content>
</Button>
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>
<Button Grid.Column="2"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#EE4545"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:OrderDish}},
Path=DataContext.DeleteDish}"
CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Delete]</Label>
</Button.Content>
</Button>
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Background="Black"
Height="40"
BorderThickness="0">Back</Button>
<Button Grid.Column="1"
Background="Red"
Height="40"
BorderThickness="0">Next</Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter TargetName="designerContent"
Property="Visibility"
Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate></ListBox.Resources>
In this button
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>

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>

C# Tab Index in TreeViewItem element

I have a simple TreeView, I'm not able to navigate in the TextBox with the focus. Do you have any suggestions???
I have updated the xaml code for give you more details. I hope this is helpful.
More Detail.
More Detail.
More Detail.
More Detail.
More Detail.
<StackPanel Orientation="Vertical" Margin="5">
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Column2"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="2147483647" HorizontalAlignment="Left" Width="5" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Name="Number" Grid.Row="0" Grid.Column="0" Text="Number"/>
<TextBox x:Name="TxtNumber" Grid.Row="0" Grid.Column="2" Text="{Binding Number}" TabIndex="0"/>
<TextBlock Name="Name" Grid.Row="1" Grid.Column="0" Text="Name"/>
<TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Name}" TabIndex="1"/>
</Grid>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="MyTree"/>
<TreeView x:Name="MyTree" BorderThickness="0" Grid.IsSharedSizeScope="True" KeyboardNavigation.TabNavigation="Continue">
<TreeView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="Black" />
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
</Style>
</TreeView.ItemContainerStyle>
<TreeViewItem>
<TreeViewItem.Header>
<TextBlock Text="First Block" FontWeight="Bold"/>
</TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1"/>
<ColumnDefinition Width="5" SharedSizeGroup="Column2"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
<RowDefinition Height="28"/>
<RowDefinition Height="28"/>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Grid.RowSpan="4" Width="5" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" IsTabStop="False"/>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A"/>
<CheckBox Grid.Row="0" Grid.Column="2" IsChecked="{Binding A}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="B"/>
<TextBox Grid.Row="1" Grid.Column="2" Text="{Binding B}" Width="200"/>
<TextBlock Name="PassBin" Grid.Row="2" Grid.Column="0" Text="C"/>
<ComboBox x:Name="CbxPassBin" Grid.Row="2" Grid.Column="2" ItemsSource="{Binding C}" SelectedValue="{Binding SelectedC}"/>
</Grid>
</TreeViewItem>
</TreeView>
</StackPanel>
</StackPanel>

TabIndex should be 1 and Focusable="true"

I found a solution, at least for my specific situation. The error was the ItemContainerStyle definition in the TreeView. Define the Window/UserControl resource's style for the TreeViewItem as below:
<Style TargetType="TreeViewItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Continue"/>
<Setter Property="IsTabStop" Value="False"/>
</Style>

Categories

Resources