Develop Reference

Change Text of Textblock in controltemplate

I have a list of items which a user can select and I would like to add an explanation text. So far I have this code
<TabItem Name="TabItem02" Header="">
<ListBox Name="listBox01" VerticalAlignment="Stretch" SelectionMode="Multiple" HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedValuePath="Content">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<CheckBox Margin="5,2" IsChecked="{TemplateBinding IsSelected}" Grid.Column="0" VerticalAlignment="Top">
<ContentPresenter VerticalAlignment="Center">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}" TextWrapping="Wrap" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</CheckBox>
<Expander Header="Explanation" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" FlowDirection="RightToLeft">
<TextBlock TextWrapping="Wrap" FlowDirection="LeftToRight"/>
</Expander>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<ListBoxItem Name="List1Item01" IsEnabled="False"/>
<ListBoxItem Name="List1Item02" IsEnabled="False"/>
<ListBoxItem Name="List1Item03" IsEnabled="False"/>
<ListBoxItem Name="List1Item04" IsEnabled="False"/>
<ListBoxItem Name="List1Item05" IsEnabled="False"/>
</ListBox>
</TabItem>
And at the moment I am changing the content of each ListBox through a ressourcefile with this code-behind
foreach (ListBox listBox in ListBoxes)
{
foreach (ListBoxItem item in listBox.Items) item.Content = resourceManager.GetString(item.Name);
}
I would like to change the text of the second TextBlock (the one in the Expander) according to the ListBoxItem it belongs to as easy as the ListBox content itself through the ressourcefile. I would prefer not to create a separate Expander + TextBlock for each ListBoxItem with a separate name.
So if anyone has a solution for my problem, I would really appreciate that.

Column Headers Offset From Data in Wpf Datagrid

Good morning
I have a Wpf datagrid that is displaying an observable collection of a custom type
I group the data using a collection view source in XAML on two seperate properties, and I have styled the groups to display as expanders.
For clarity, as there is a lot of data I feel I have to use margins and spacing otherwise things look very cluttered.
My problem is that with two levels of hierarchical expanders the column data is now substantially offset from the column headers meaning that they do not properly line up.
I have tried several thing, like setting the margin of the column headers and the width (both actual and normal). However all of my attempts end up resizing the whole column so that the offset stays the same but the columns move.
so my question:
How can I change the visible width or offset of a column header to ensure that the headers line up with the data
Visual Studio 2012
Wpf
C#
DataGrid
EDIT This is what I mean
EDIT 2 - MY Xaml for Grouping
<!-- Style for groups at top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5,10,5,5"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="1"
Header="{Binding Name}"
IsExpanded="True">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Margin="0"
Content="{TemplateBinding Header}"
DockPanel.Dock="Top"
FontSize="14"
FontWeight="Bold"
Foreground="{StaticResource BlackBrush}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="5"
Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
IsExpanded="True"
Visibility="{Binding Items[0].IsSelectedInSidebar,
Converter={StaticResource VisibilityConverter}}">
<Expander.Template>
<!-- The basic expander -->
<ControlTemplate TargetType="{x:Type Expander}">
<!-- Put a border around the expander -->
<Border Background="{Binding Path=Name,
Converter={StaticResource ColourConverter}}"
BorderBrush="{StaticResource GreyBrush}"
BorderThickness="2"
CornerRadius="3">
<!-- Use a dock panel so that the toggle button is docked to the top and the content is docked to the bottom -->
<DockPanel Margin="0">
<!-- Add the toggle button -->
<ToggleButton x:Name="ExpanderButton"
Content="{Binding Path=Name}"
DockPanel.Dock="Top"
FontSize="12"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpanderContent"
Margin="5"
ContentSource="Content"
DockPanel.Dock="Bottom"
Visibility="{Binding ElementName=ExpanderButton,
Path=IsChecked,
Converter={StaticResource VisibilityConverter}}" />
</DockPanel>
</Border>
</ControlTemplate>
</Expander.Template>
<Expander.Content>
<Border BorderBrush="{StaticResource BlackBrush}" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsPresenter Grid.Row="0" Margin="0" />
<Border Grid.Row="1"
Margin="0,10,0,0"
BorderBrush="{StaticResource BlackBrush}"
BorderThickness="0,1,0,0"
Visibility="{Binding Data.SettingRepository.MainDataSummaryVisible,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}">
<Grid Background="{StaticResource WhiteBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option1Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].Option1Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option2Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].Option2Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option3Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].Option3Data,
Mode=OneWay}" />
<TextBlock Grid.Column="6"
Margin="5"
FontWeight="Bold"
Text="{Binding Path=Items[0].Option4Title}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="7"
Margin="5"
Text="{Binding Path=Items[0].Option4Data,
Mode=OneWay}"
Visibility="{Binding Data.SettingRepository.MainDataShowSampleOptions,
Source={StaticResource BindingProxy},
Converter={StaticResource VisibilityConverter}}" />
<TextBlock Grid.Column="8"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleIsAnnealedColumnHeader}" />
<CheckBox Grid.Column="9"
Margin="3,5,5,5"
IsChecked="{Binding Path=Items[0].SampleIsAnnealed,
Mode=OneWay}"
IsHitTestVisible="False"
Style="{StaticResource FandFCheckBox}" />
</Grid>
<!-- The mean Match temperature -->
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.MeanSampleMatchTemperatureTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanMatchTemperature,
Mode=OneWay,
StringFormat=\{0:N2\}}" />
<!-- The match temperature range -->
<TextBlock Grid.Row="1"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureRangeTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureRange}" />
<!-- The match temperature standard deviation -->
<TextBlock Grid.Row="1"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleTemperatureStandardDeviationTitle}" />
<TextBlock Grid.Row="1"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleMatchTemperatureStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N3\}}" />
<!-- The mean refractive index -->
<TextBlock Grid.Row="2"
Grid.Column="0"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleMeanRefractiveIndexTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="1"
Margin="5"
Text="{Binding Path=Items[0].SampleMeanRefractiveIndex,
Mode=OneWay,
StringFormat=\{0:N5\}}" />
<!-- The refractive index range -->
<TextBlock Grid.Row="2"
Grid.Column="2"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIRangeTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="3"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexRange}" />
<!-- The refractive index standard deviation -->
<TextBlock Grid.Row="2"
Grid.Column="4"
Margin="5"
FontWeight="Bold"
Text="{x:Static languages:Strings.SampleRIStandardDeviationTitle}" />
<TextBlock Grid.Row="2"
Grid.Column="5"
Margin="5"
Text="{Binding Path=Items[0].SampleRefractiveIndexStandardDeviation,
Mode=OneWay,
StringFormat=\{0:N7\}}" />
</Grid>
</Border>
</Grid>
</Border>
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>

You can set the ColumnHeaderStyle and there set a RenderTransform that moves the headers to the right.
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
EDIT 2:
As you mentioned, doing this will result in a small gap. To remove it you should set the left margin of the first column to a negative value, which stretches the header of this column to the left. You can do it like this:
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
//change the margin accordingly
<Setter Property="Margin" Value="-100 0 0 0" />
<Setter Property="RenderTransform">
<Setter.Value>
//change the X value accordingly
<TranslateTransform X="100"></TranslateTransform>
</Setter.Value>
</Setter>
</Style>
</DataGridTemplateColumn.HeaderStyle>
You have to set the RenderTransform here again, because this style overwrites the general ColumnHeaderStyle. To remove duplication you can add the render transfrom as a resource.
EDIT:
I just saw that you have a few margins on your Expanders and ContentPresenters. If you change them so that you have 0 margin to the left, it would align the content more to the left and reduce the alignment difference.
You would then need less offset on the RenderTransform.
Some examples of your code to illustrate what I mean:
<Expander Margin="5,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="5"
If you change it to
<Expander Margin="0,10,5,5"
<ContentPresenter x:Name="ExpanderContent" Margin="0 5 5 5"
the columns move more to the left.

Adding combobox to Ribbon Control in XAML

I have a WPF Application with a Ribbon Control. I want to add a ComboBox, to show the logged in user next to the help button. But when I try to add the ComboBox, it is created as a Tab.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Ribbon x:Name="RibbonWin" SelectedIndex="0" Margin="0,0,0,113">
<Ribbon.HelpPaneContent>
<RibbonButton SmallImageSource="Images\help.png"></RibbonButton>
</Ribbon.HelpPaneContent>
<RibbonComboBox>
<ComboBoxItem Content="Test1"/>
</RibbonComboBox>
<RibbonTab Header="Home" KeyTip="H" Margin="0,0,0,-1" >
<RibbonGroup x:Name="ClipboardGroup" Header="Clipboard">
<RibbonMenuButton LargeImageSource="Images\paste.jpg" Label="Paste" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Keep Text Only" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\cut.jpg" Label="Cut" KeyTip="X" />
<RibbonButton SmallImageSource="Images\copy.jpg" Label="Copy" KeyTip="C" />
</RibbonGroup>
<RibbonGroup x:Name="Questions" Header="Questions And Answers">
<RibbonMenuButton LargeImageSource="Images\Question.jpg" Label="Questions" KeyTip="V">
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Add Question" KeyTip="T"/>
<RibbonMenuItem ImageSource="Images\paste.jpg" Header="Paste Special..." KeyTip="S"/>
</RibbonMenuButton>
<RibbonButton SmallImageSource="Images\Save.jpg" Label="Save" KeyTip="X" />
<RibbonButton SmallImageSource="Images\Add.jpg" Label="Add" KeyTip="C" />
</RibbonGroup>
</RibbonTab>
<RibbonTab Header="Insert" KeyTip="I">
</RibbonTab>
<RibbonTab Header="PageLayout" KeyTip="L">
</RibbonTab>
</Ribbon>
</Grid>
Also is there a way to remove the the Application Menu ComboBox on the left that is created by default.

Put a RibbonApplicationMenu into the ApplicationMenu-property and set its Visibility to 'Collapsed'. This will not remove the application menu, but at least it is not longer visible. There is not other way to hide it.
The ComboBox must be inserted into a RibbonTab, so a RibbonTab will be created implicitly if you do not specify anyone.
The following example demonstrates how to hide the application menu and insert a combo box:
<Ribbon>
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu Visibility="Collapsed"></RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab>
<RibbonGroup>
<RibbonComboBox></RibbonComboBox>
</RibbonGroup>
</RibbonTab>
</Ribbon>

I got it from my friend,
this might help you
Create your own template and add it to Ribbon HelpPaneContentTempalte
<Ribbon.HelpPaneContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="24">
<ToggleButton x:Name="btn" >
<TextBlock Text="Operator"/>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=btn}" x:Name="Popup" StaysOpen="False" Placement="Bottom"
PlacementTarget="{Binding ElementName=btn}" Height="120" Width="150" HorizontalOffset="-90" >
<Popup.Resources>
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock>
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Popup.Resources>
<Border BorderBrush="Gray" BorderThickness="2" Background="White" >
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Height="50">
<Image Source="Images\UserPhoto.png" Height="30"/>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="Operator" FontSize="16" Margin="10,0,0,0"/>
<TextBlock Text="Operator#xxx.com" FontSize="10" Foreground="DarkGray" Margin="10,0,0,0"/>
</StackPanel>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnAccountSettings" Content="Account Settings" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
<Separator Background="LightGray"/>
<StackPanel Height="30">
<Button x:Name="btnSwitchAccount" Content="Switch Account" Style="{StaticResource LinkButton}" Width="100" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"></Button>
</StackPanel>
</StackPanel>
</Border>
</Popup>
<ContentPresenter Content="{TemplateBinding Property= ContentControl.Content}" />
</StackPanel>
</DataTemplate>
</Ribbon.HelpPaneContentTemplate>
<Ribbon.HelpPaneContent>
<RibbonButton x:Name="btnHelp" SmallImageSource="Images\help.png" />
</Ribbon.HelpPaneContent>

WPF combobox itemtemplate overrides togglebutton style

i have problem with styling the combobox's togglebutton.
my combobox xaml code looks like this:
<ComboBox Width="Auto"
HorizontalContentAlignment="Stretch"
FontFamily="HelveticaNeue-Bold"
FontSize="20"
FontWeight="Bold"
Foreground="#FFC0C0C0"
Padding="0,0,0,0"
Style="{DynamicResource navigationComboBox}"
ItemsSource="{Binding Tournaments}"
SelectedValue="{Binding SelectedTournament}">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
</ComboBox.Resources>
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"
Orientation="Vertical"
Width="auto"
Height="{Binding Tournaments, Converter={StaticResource CollectionToHeightConverter}}"/>
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
<ComboBox.ItemTemplate>
<DataTemplate>
<DockPanel x:Name="comboDock">
<DockPanel.Background>
<ImageBrush ImageSource="{Binding Converter={StaticResource ImagePathConverter}, ConverterParameter=comboboxitem-line.png}" />
</DockPanel.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="41" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<DockPanel x:Name="comboArrow"
Grid.Column="0"
Visibility="Collapsed">
<DockPanel.Background>
<ImageBrush ImageSource="{Binding Converter={StaticResource ImagePathConverter}, ConverterParameter=SportsSubMenuActive.png}" />
</DockPanel.Background>
</DockPanel>
<TextBlock x:Name="comboText"
Grid.Column="1"
FontFamily="HelveticaNeue-Bold"
FontSize="20"
FontWeight="Bold"
Foreground="#FFC0C0C0"
Padding="0,0,10,0"
Text="{Binding Path=Name}"
TextAlignment="Left"
TextWrapping="Wrap" />
</Grid>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="True">
<Setter TargetName="comboArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="comboText" Property="Foreground" Value="#F94B01" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ComboBox.ItemTemplate>
so i'm trying to remove the background set to on togglebutton, but it is not possible. if i remove the background on itemtemplate, then i can style the toggle button background. is there any special order in the process to prevent me from changing the background of the togglebutton content if it is set in itemtemplate?
thanks in advance guys,
Kristo

Setting a property directly takes priority over any Setter(s). Instead of setting the property directly, use a Style for your DockPanel and use a Setter to set the background similar to what you do in your DataTrigger. That should allow you to change the background property elsewhere.

How to right align some elements of WPF ListItem?

I have a WPF listbox and have updated the list item data template to have essentially a 3 column layout.
I would like:
|status color|name| buttons|
These are probably CSS terms but I want to float the status color and name to the left, which I've done, then I would like the buttons to be floated to the right, and always stay to the right even as the window gets wider.
I feel like I'm so close, the list item widths grow when the window gets wider, all I feel I have to do is tell the buttons to float right but can't figure out how. I've tried stack panels, a grid with a auto|*|auto column layout (With a stretch on the last column) and I've tried a dockpanel.
Here's my XAML:
<Controls:MetroWindow x:Class="Appsecute.Views.MainView2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:AppsecuteControls="clr-namespace:Appsecute.Controls"
Title="APPSECUTE" Height="630" Width="480" Icon="/Appsecute;component/Images/icon.png" WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="0,0,12,0">
<AppsecuteControls:NotifyIcon
x:Name="NotifyIcon"
Text="Appsecute"
Icon="/Images/icon.ico" MouseDoubleClick="NotifyIconMouseDoubleClick" Grid.ColumnSpan="2">
<AppsecuteControls:NotifyIcon.ContextMenu>
<ContextMenu StaysOpen="False">
</ContextMenu>
</AppsecuteControls:NotifyIcon.ContextMenu>
</AppsecuteControls:NotifyIcon>
<Grid Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="auto" Margin="12,0,0,24">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="APPLICATIONS" Height="auto" Name="LabelApplications" Grid.Row="0" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxApplications" Width="auto" Grid.Row="1" Grid.ColumnSpan="3" Focusable="False" Background="White" BorderBrush="{x:Null}" SelectionChanged="ListBoxApplicationsSelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="Background" Value="#EEEEEE"></Setter>
<Setter Property="BorderBrush" Value="White"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,2"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FF4EA6EA"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Fill="{Binding StateColor}" Width="5" Height="auto" Margin="0,0,5,0"></Rectangle>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
<TextBlock Text="{Binding DisplayName}" FontSize="20" Padding="2" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,4">
<TextBlock Text="{Binding CloudName}" FontSize="12" Foreground="#FF666666" />
<TextBlock Text=" - " FontSize="12" Foreground="#FF666666" />
<TextBlock Text="{Binding Username}" FontSize="12" Foreground="#FF666666" />
</StackPanel>
</StackPanel>
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonUpload" ToolTip="Upload Application" Click="ButtonUploadClick">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/upload.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStart" Click="ButtonStartClick" ToolTip="Start Application" IsEnabled="{Binding IsStopped}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/play.png" />
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Tag="{Binding}" Name="ButtonStop" ToolTip="Stop Application" Click="ButtonStopClick" IsEnabled="{Binding IsStarted}">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/stop.png"/>
</StackPanel>
</Button>
<Button Background="{x:Null}" BorderBrush="{x:Null}" Focusable="False" Click="ButtonRestartClick" Tag="{Binding}" Name="ButtonRestart" ToolTip="Restart Application">
<StackPanel>
<Image Width="24" Height="24" Source="/Appsecute;component/Images/restart.png"/>
</StackPanel>
</Button>
</DockPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Label Content="SERVICE INSTANCES" Height="auto" Name="LabelServiceInstances" Grid.Row="2" Grid.ColumnSpan="3" Padding="2" Margin="0,8,0,0" VerticalAlignment="Top" />
<ListBox Height="auto" Name="ListBoxServiceInstances" Width="auto" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="3" />
</Grid>
<Label Height="28" HorizontalAlignment="Left" Margin="0,0,0,0" Name="LabelStatus" VerticalAlignment="Bottom" Width="auto" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Stretch" FontSize="10" />
</Grid>
</Controls:MetroWindow>
And an image of what I'm trying to achieve:

The problem is at the first level below DataTemplate, here:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
By its nature a StackPanel will align items to the left, so it's not a layout that's well suited to what you want to do. Instead try using a Grid with two columns, giving the left column Width=* and the right Width=Auto.
<ListBox HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
...
</StackPanel>
<DockPanel Grid.Column="1" VerticalAlignment="Center">
...
</DockPanel>
</Grid>
<DataTemplate>
</ListBox.ItemTemplate>
<ListBox>

In your ItemContainerStyle, set the HorizontalAlignment to Stretch. I believe it is Left by default, which may be causing the Grid or StackPanel or whatever container you use to collapse.