Hi. I'm running into issues with having a RadExpander in a RadListBox. Basically, I have exactly something like here or here.
I have a OneWayToSource binding, but I want the binding to happen only when the RadExpander is expanded and not when it is collapsed.
Is there a way I can conditionally bind the two UI Elements?
EDIT: (Sample code which makes some of the downvoters happy)
<DataTemplate x:Key="ListBoxItemTemplate" DataType="{x:Type telerik:RadListBoxItem}">
<!--<DataTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=listExpander, Path=IsExpanded, Mode=TwoWay}" Value="True">
<Setter Property="IsSelected" Value="True" />
</DataTrigger>
</DataTemplate.Triggers>-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<telerik:RadExpander x:Name="listExpander"
IsExpanded="{Binding Mode=TwoWay, IsAsync=True, Path=IsSelected, RelativeSource={RelativeSource AncestorType=telerik:RadListBoxItem, Mode=FindAncestor}}"
VerticalContentAlignment="Top" ToolTip="Double click on the List name to edit it">
<telerik:RadExpander.Header>
<Grid>
<TextBlock x:Name="listNameCaption" MouseDown="listName_txtblk_MouseDown"
Text="{Binding ListName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource HighlightedDetailsStyleForTextBlock}" />
<TextBox LostFocus="listName_txtbox_LostFocus" Visibility="Collapsed"
Text="{Binding ListName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource HighlightedDetailsStyleForTextBox}" />
</Grid>
</telerik:RadExpander.Header>
<telerik:RadExpander.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderBrush="#FFDADADA" BorderThickness="0,0,1,1" MinHeight="20" MinWidth="200" CornerRadius="3" Margin="5">
<Border BorderBrush="#B2ADBDD1" BorderThickness="1" CornerRadius="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="List Type:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding ListType}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="Tree:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding TreeName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label FontFamily="Segoe UI" FontSize="11" Content="Discount Date:" FontStyle="Italic" />
<Label FontFamily="Segoe UI" FontSize="11" Content="{Binding DiscountDate}" />
</StackPanel>
</StackPanel>
</Border>
</Border>
</Grid>
</telerik:RadExpander.Content>
<!--<telerik:RadExpander.Style>
<Style TargetType="{x:Type telerik:RadExpander}">
<Style.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=IsSelected}" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</telerik:RadExpander.Style>-->
</telerik:RadExpander>
</Grid>
</DataTemplate>
<telerik:RadListBox x:Name="allListBox"
Style="{StaticResource ListBoxStyle}"
ItemsSource="{Binding Lists, Mode=TwoWay}"
ItemTemplate="{StaticResource ListBoxItemTemplate}"
SelectedItem="{Binding SelectedListItem, Mode=TwoWay}">
<telerik:RadListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</telerik:RadListBox.ItemsPanel>
</telerik:RadListBox>
EDIT 2:
Fixed it, but from code behind. Wish there was a cleaner way where we could just say: "RadExpander - you bind to RadListBoxItem's IsSelected property only if you have IsExpanded=True" from XAML.
This is the work-around code:
private void ListItemExpanded(object sender, RadRoutedEventArgs e)
{
var listItem = sender as RadExpander;
if(listItem == null)
return;
if (!listItem.IsExpanded) return;
var parent = VisualTreeHelper.GetParent(listItem);
while (parent != null && !(parent is RadListBoxItem))
{
parent = VisualTreeHelper.GetParent(parent);
}
if(parent == null)
return;
var listBoxItem = parent as RadListBoxItem;
if (!listBoxItem.IsSelected)
listBoxItem.IsSelected = true;
}
and
<telerik:RadExpander x:Name="listExpander" Expanded="ListItemExpanded" VerticalContentAlignment="Top" ToolTip="Double click on the List name to edit it">
Solution 1. React to the expand events and change the binding of your element through code.
Solution 2: Use MultiBinding and IMultiValueConverter: http://www.switchonthecode.com/tutorials/wpf-tutorial-using-multibindings
Related
I want to put a TextBox over the PasswordBox to make the encrypted password visible with a button.
When I press the button I want to see the password from the PasswordBox in the TextBox, but my problem is the alignment, because these two components are in the Grid, the TextBox is aligned to the right of the PasswordBox.
This is my XAML file:
<UserControl
x:Class="Waters.NuGenesis.LmsBundle.Plugins.Views.RpcView"
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:controls="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:presentation="clr-namespace:Waters.NuGenesis.UiEngine.Presentation;assembly=Waters.NuGenesis.UiEngine.Presentation"
xmlns:viewModels="clr-namespace:Waters.NuGenesis.LmsBundle.Plugins.ViewModels"
xmlns:buttons="clr-namespace:Waters.NuGenesis.UiEngine.Presentation.Controls.Buttons;assembly=Waters.NuGenesis.UiEngine.Presentation"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800"
d:DataContext="{d:DesignInstance viewModels:RpcViewModel}">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
<DockPanel>
<controls:PageTitleBlock
DockPanel.Dock="Top"
Title="RPC & SDMS Login"
Description="Configure SDMS RPC and SDMS Login services." />
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="Margin" Value="0 3 15 0" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {x:Type PasswordBox}}">
<Setter Property="Margin" Value="0 3" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
<RowDefinition Height="Auto" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
Content="User Name"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="0"
Text="{Binding RpcUserName, UpdateSourceTrigger=LostFocus}"
Visibility="{Binding IsRpcUserNameVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Label
Grid.Column="0"
Grid.Row="2"
Content="Password"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>
<Label
Grid.Column="0"
Grid.Row="4"
Content="Domain"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="4"
Text="{Binding RpcDomain}"
Visibility="{Binding IsRpcDomainVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</DockPanel>
</UserControl>
What I want to modify is this DockPanel:
<DockPanel
Grid.Column="1"
Grid.Row="2">
<buttons:SmallButton
DockPanel.Dock="Right"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}" />
<PasswordBox
Grid.Column="1"
Grid.Row="2"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="1"
Grid.Row="2"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}" />
</DockPanel>
You put the PasswordBox and the TextBox in a DockPanel, but set the attached Grid.Row and Grid.Column properties, which do not have any effect here, they are only respected by Grid.
The DockPanel will arrange items next to each other, but not overlapping.
Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
You should use a Grid instead which the same column for the PasswordBox and the TextBox.
<Grid
Grid.Column="1"
Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<buttons:SmallButton
Grid.Column="1"
Content="See"
Margin="15 0 0 0"
Command="{Binding ShowPasswordCommand}"/>
<PasswordBox
Grid.Column="0"
presentation:UnsafePasswordBox.BindPassword="True"
presentation:UnsafePasswordBox.BoundPassword="{Binding Path=RpcPassword, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding IsRpcPasswordVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox
Grid.Column="0"
Name="TestShowPassword"
Text="{Binding DisplayRpcPassword, UpdateSourceTrigger=PropertyChanged}"
Visibility="{Binding SetVisibility}"/>
</Grid>
I have a part of code that makes it so every listbox in my application shows a message when empty.
<Style TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock FontSize="20" Foreground="{DynamicResource ValidationErrorBrush}"
TextAlignment="Center" Text="Geen data beschikbaar" Width="Auto" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
When I run the application with it enabled (uncommended) the empty listbox indeed display the message.
But when they are filled the item template is wider than it should be.
This is an example where I use a listbox:
<ListBox x:Name="DataGridTraffic"
Grid.Row="1"
SnapsToDevicePixels="True"
ItemsSource="{Binding Path=TrafficJams}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
SelectedIndex="-1"
ItemTemplate="{DynamicResource TrafficJamDataTemplateShort}"
AlternationCount="2"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{DynamicResource MainListBoxStyle}" />
Does anyone have a clue on what is going on?
Edit:
The first image shows how it is when I enable the trigger.
The second shows the way it is supposed to be.
Edit:
Here is some more as asked for.
This is the Datatemplate for the same thing as the pictures.
<DataTemplate x:Key="BusDeparturesDataTemplateShort" DataType="{x:Type model:BusDeparture}">
<Grid>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Setter Property="Background" Value="{DynamicResource ValidationErrorLighterBrush}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=DelayText}" Value="">
<Setter Property="Background" Value="Transparent" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid Margin="4,8,4,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="Center"
FontWeight="Bold"
FontSize="32"
Text="{Binding Path=DeparturePlatform}"
Grid.Column="0" Margin="0,0,5,0"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=PlatformChanged}" Value="True">
<Setter Property="Foreground" Value="{DynamicResource ValidationErrorBrush}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=PlatformChanged}" Value="False">
<Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidBrush}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<StackPanel Orientation="Horizontal"
TextBlock.FontSize="18"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<TextBlock Text="{Binding Path=ServiceNumber}" Width="45" />
<TextBlock Text="{Binding Path=Destination}" />
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel Orientation="Horizontal"
TextBlock.FontSize="16"
HorizontalAlignment="Left">
<TextBlock Text="{Binding Path=DepartureTime, StringFormat=HH:mm}" Margin="0,0,4,0" />
<TextBlock Text="{Binding Path=DelayText}" TextAlignment="Right"
Foreground="{DynamicResource ValidationErrorBrush}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
TextBlock.FontSize="16"
HorizontalAlignment="Right">
<TextBlock Text="{Binding Path=Carrier}" TextAlignment="Right"
HorizontalAlignment="Stretch" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
And the part where the listbox is in:
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<materialDesign:Card Margin="8" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch"
materialDesign:ShadowAssist.ShadowDepth="Depth2" x:Name="CardTrain">
...
</materialDesign:Card>
<materialDesign:Card Margin="8" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch"
materialDesign:ShadowAssist.ShadowDepth="Depth2" x:Name="CardBus">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0,0,0,1">
<TextBlock Text="Bustijden" Foreground="{DynamicResource PrimaryHueDarkBrush}"
TextAlignment="Center"
FontSize="36" FontWeight="ExtraBold" />
</Border>
<ListBox x:Name="DataGridBus"
Grid.Row="1"
SnapsToDevicePixels="True"
ItemsSource="{Binding Path=BusDepartures}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
SelectedIndex="-1"
ItemTemplate="{DynamicResource BusDeparturesDataTemplateShort}"
AlternationCount="2"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemContainerStyle="{DynamicResource MainListBoxStyle}"
VerticalAlignment="Top" />
</Grid>
</materialDesign:Card>
<materialDesign:Card Margin="8" Grid.Row="0" Grid.Column="2" VerticalAlignment="Stretch"
materialDesign:ShadowAssist.ShadowDepth="Depth2" x:Name="CardTraffic">
...
</materialDesign:Card>
<materialDesign:Card Margin="8" Grid.Row="0" Grid.Column="3" VerticalAlignment="Stretch"
materialDesign:ShadowAssist.ShadowDepth="Depth2" x:Name="CardTwitter">
...
</materialDesign:Card>
<materialDesign:Card Margin="8" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
VerticalAlignment="Stretch" materialDesign:ShadowAssist.ShadowDepth="Depth2"
x:Name="CardNews">
...
</materialDesign:Card>
</Grid>
Below is my xaml
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox x:Name="movieList" ItemsSource="{Binding Path=MovieMain.Movies}" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Grid.Column="1" Margin="10">
<StackPanel Orientation="Horizontal">
<Label Content="Selected movie: " Margin="2" />
<Label Content="{Binding Path=SelectedItem.Name, ElementName=movieList}" />
</StackPanel>
<igDP:XamDataGrid x:Name="dataGrid" DataSource="{Binding Path=SelectedItem.Artists, ElementName=movieList}">
<igDP:XamDataGrid.FieldLayouts>
<igDP:FieldLayout>
<igDP:ComboBoxField Name="Name">
<igDP:ComboBoxField.EditorStyle>
<Style TargetType="igEditors:XamComboEditor">
<Setter Property="ItemsSource"
Value="{Binding Path=DataContext.ComboItems, RelativeSource={RelativeSource AncestorType={x:Type igDP:XamDataGrid}}}" />
</Style>
</igDP:ComboBoxField.EditorStyle>
</igDP:ComboBoxField>
<igDP:NumericField Name="Age" />
</igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>
</StackPanel>
<Button Grid.Row="1" Grid.Column="0" Width="55" Height="25" Command="{Binding ClickCommand}"/>
</Grid>
In above I bind Listbox with one model and based on selected item I am binding datagrid.
Now I am doing delete operation on datagrid. So how can I achieve the delete functionality?
I created a button for deleteing records. Can we pass command parameter for sleeted row?
Try this:
<Button ... Command="{Binding ClickCommand}"
CommandParameter="{Binding SelectedDataItems[0], ElementName=dataGrid}" />
I have two things I'm trying to achieve:
Add a horizontal separator between listbox items in WPF.
Don't show the separator at the bottom of the final listbox item.
My current layout is pictured here:
This shows 2 listbox items (though I have no way of knowing how many items could potentially be generated). I would like them separated by a horizontal separator, except on the last listbox item so there isn't a spare separator at the bottom of the pane. How can I achieve this in XAML? See my current XAML here:
<TabItem Header="Third Party Updates">
<Grid>
<TextBlock Name="ThirdPartyNoManifestTextBox" Width="Auto" HorizontalAlignment="Left" Margin="267,22,0,0" TextWrapping="Wrap" Text="{Binding Path=WindowsUpdateCompliance, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" FontSize="14" Foreground="DarkSlateBlue"/>
<Button Name="CheckforThirdPartyUpdatesButton" Content="Check for Third Party Updates" Margin="10,11,339,304" Click="CheckforThirdPartyUpdatesButton_Click" MaxWidth="200" Grid.Column="1" Grid.Row="1"/>
<ListBox Name="ThirdPartyListBox" ItemsSource="{Binding}" Margin="0,70,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="•" Grid.Row="1" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="2" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="3" VerticalContentAlignment="Center"/>
<Label Content="•" Grid.Row="4" VerticalContentAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Label Name="MissingRequiredAppGenericTextBlock" VerticalAlignment="Center" Content="Required application update detected:" FontWeight="SemiBold" FontSize="12"/>
<Label Name="RequiredAppNameTextBlock" VerticalAlignment="Center" Content="{Binding Item2.Name}" Foreground="MidnightBlue" FontSize="13"/>
<Label Grid.Column="1" Grid.Row="1" Name="RequiredAppVersionTextBlock" Content="{Binding Item2.RequiredVersion}" VerticalAlignment="Center" Foreground="MidnightBlue" FontSize="13"/>
</StackPanel>
<TextBlock Grid.Column="1" Grid.Row="1" Name="RequiredAppCustomUIMessageTextBlock" Text="{Binding Item2.CustomUIMessage}" TextWrapping="Wrap" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" VerticalAlignment="Center">
<Hyperlink Name="Link" NavigateUri="{Binding Item2.TT}" RequestNavigate="Hyperlink_RequestNavigate">
<TextBlock Text="{Binding Item2.TT}"/>
</Hyperlink>
</TextBlock>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3">
<TextBlock Text="The following processes will be closed prior to install: " VerticalAlignment="Center" />
<TextBlock Text="{Binding Item2.ListOfProcessesToClose}" FontWeight="SemiBold" Foreground="Red" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="4">
<TextBlock Text="You have used " VerticalAlignment="Center" />
<TextBlock Text="{Binding Item3.UsedDeferrals}" VerticalAlignment="Center"/>
<TextBlock Text=" of " VerticalAlignment="Center"/>
<TextBlock Text="{Binding Item2.MaxDefferals}" VerticalAlignment="Center"/>
<TextBlock Text=" deferrals for this update." VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<DataTrigger Binding="{Binding PostponeClicked}" Value="1">
<Setter Property="Visibility" Value="Hidden"></Setter>
</DataTrigger>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.BorderBrush" Value="SteelBlue" />
<Setter Property="Control.BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</TabItem>
Update
Added suggested separator code. Separator is now present but does not fill the available horizontal space:
You can try to put Separator at the top of each item. With that you don't have unwanted Separator after the last item.
Then use DataTrigger with {RelativeSource PreviousData} binding to hide separator at the top of the first item :
<StackPanel>
<Separator>
<Separator.Style>
<Style TargetType="Separator">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Separator.Style>
</Separator>
<StackPanel Orientation="Horizontal">
<Button Name="ThirdPartyInstallButton" Content="Install" Click="InstallThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Button Name="ThirdPartyPostoneButton" Content="Postpone" Click ="PostponeThirdPartyUpdatesButton_Click" Margin="5,5,0,0" Height="25"></Button>
<Grid>
.........
.........
</Grid>
</StackPanel>
</StackPanel>
UPDATE :
I can't tell for sure what causes the separator not stretching accross listbox width. Maybe try to set listboxitem's HorizontalContentAlignment to Stretch :
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
I have a ListBox which is bound to my custom class
ObservableCollection<FieldPropertyItem> _fieldOrderCollection`;
internal struct FieldPropertyItem
{
public string Name { get; set; }
public string AliasName { get; set; }
}
Code for ListBox:
<ListBox x:Name="FieldOrderListBox" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" SelectedIndex="0"
ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="FieldOrderListBox_SelectionChanged">
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF479EF3"></SolidColorBrush>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate x:Name="MyTemplate">
<Grid Margin="-5,-1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="FieldName" MinWidth="5" MaxWidth="300"/>
<ColumnDefinition Width="2" />
<ColumnDefinition Width="*" MaxWidth="350"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" Grid.Column="0" BorderThickness="0.5,0.0,0.5,0.5" IsHitTestVisible="False">
<TextBlock Text="{Binding Name}" Grid.Column="0" ToolTip="{Binding Name}" Margin="2,0,2,0" VerticalAlignment="Center"/>
</Border>
<GridSplitter Grid.Column="1" Width="2" HorizontalAlignment="Left" Background="Black" Margin="-2,0,-1,0"/>
<Border BorderBrush="Black" BorderThickness="0,0.0,0.5,0.5" Margin="-2,0,0,0" Padding="0,5,0,0" Grid.Column="2">
<TextBlock Text="{Binding AliasName}" Grid.Column="1" ToolTip="{Binding AliasName}" Margin="2,0,2,0" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now i want that my ListBox first item should look like header. The remaining ones should have a light dim background.
You can check if the previous item is null using a RelativeSource binding in a trigger, e.g. this DataTemplate makes the first element bold:
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="TextElement.FontWeight" Value="Bold" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<TextBlock Grid.Column="0" Text="{Binding Name}" />
<TextBlock Grid.Column="1" Text="{Binding AliasName}" />
</Grid>
</DataTemplate>
(Use shared size groups as shown above to align the grids with one-another, set Grid.IsSharedSizeGroup to true on the ListBox element)
I would not recommend doing this by the way, if your item collection contains the header there is definitely something wrong with your data-design.
1.) You can have a new Property IsFirstItem on your FieldPropertyItem
Whenever your _fieldOrderCollection changes determine the IsFirtItem Property of the elements in your ObservableCollection.
2.) Define the corresponding Templates in XAML (Normal and FirstItem Template)
3.) You can then bind in XAML like this:
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl x:Name="contentControl" Content="{Binding}" ContentTemplate="{StaticResource normalTemplate}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsFirstItem}" Value="True" >
<Setter TargetName="contentControl" Property="ContentTemplate" Value="{StaticResource firstItemTemplate}"></Setter>
</DataTrigger>
</DataTemplate.Triggers>
</ListBox.ItemTemplate>
</ListBox>