Add custom combobox scrollbar style wpf - wpf

I know that I can find this on http://mark-dot-net.blogspot.com/2008/06/styling-listbox-with-silverlight-2-beta_21.html but I would like to be able to just do something like this:
<ComboBox Width="163" Height="30">
<ComboBox.Style>
<Style>
<Setter Property="ScrollViewer" Value="{StaticResource Custom}"/>
</Style>
</ComboBox.Style>
</ComboBox>
But because of the ScrollViewer is not available, I tried doing something like this:
<ComboBox Width="163" Height="30">
<Style>
<Setter Property="ScrollViewer.Style" Value="{StaticResource Custom}"/>
</Style>
</ComboBox>
But it does not work and if I keep in the Combobox.Style it gives me the error Style object is not allowed to affect the Style property of the object to which it applies to. I have also tried doing ScrollViewer.Template but my computer crashes when I do this /: Is there a way to do this without using the method in the link I provided earlier? My style xaml is:
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="0"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="0"/>
</Grid.RowDefinitions>
<Border Grid.RowSpan="3" CornerRadius="2" Background="Transparent" />
<RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Margin="1,0,1,0" Background="#E43D47" BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="3" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</ControlTemplate>

Just declare a ScrollViewer style in the ComboBox's Resources block:
<ComboBox ItemsSource="{Binding Items}">
<ComboBox.Resources>
<Style TargetType="ScrollViewer">
<Setter Property="Background" Value="Green" />
<Setter Property="Padding" Value="20" />
</Style>
</ComboBox.Resources>
</ComboBox>

Related

How I get this kind of drop shadow Direction, Shadow depth, Color shown in the Tooltip (Click me) in this image in WPF?

I just want to know the Drop Shadow shadow depth, Direction, Blur radius, opacity of the tooltip? And what is the Hex Color code of a windows 10 Tooltip
You can get/set the values in the Tooltip's ControlTemplate.In my code, I set the name for the DropShadowEffect and get the value by using ElementName, then show the values in a Grid which included in parent grid.
<Window.Resources>
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="150">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect x:Name="Myeffect" ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">ShadowDepth:</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=ShadowDepth}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">Direction:</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Direction}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Color:</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Color}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Opacity:</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Opacity}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">BlurRadius:</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=BlurRadius}"><!--Useful information goes here.--></TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border" Property="CornerRadius" Value="0" />
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" HorizontalAlignment="Center" Content="Click Here">
<Button.Template >
<ControlTemplate TargetType="{x:Type Button}" >
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
<Button.ToolTip>
<ToolTip>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
The result is as below picture shown:

Change WPF Combobox arrow using a data trigger

I am using a multi-select combobox that I found on CodeProject [http://www.codeproject.com/Articles/563862/Multi-Select-ComboBox-in-WPF].
I am attempting to change the shape of the arrow depending on whether or not all of the items are selected. However I have been unable to correctly reference the x:Name of Arrow in the setter.
Here is the code I've been trying to modify:
<UserControl x:Class="Z_Sys_UI.System.MultiSelectComboBox"
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"
mc:Ignorable="d" >
<ComboBox
x:Name="MultiSelectCombo"
SnapsToDevicePixels="True"
OverridesDefaultStyle="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
IsSynchronizedWithCurrentItem="True"
>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Title}"
IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"
Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}"
Click="CheckBox_Click" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.Template>
<ControlTemplate TargetType="ComboBox">
<Grid >
<ToggleButton
x:Name="ToggleButton"
Grid.Column="2" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false"
ClickMode="Press" HorizontalContentAlignment="Left" >
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
Background="White"
BorderBrush="Black"
BorderThickness="1,1,1,1" />
<Border
x:Name="BorderComp"
Grid.Column="0"
CornerRadius="2"
Margin="1"
Background="White"
BorderBrush="Black"
BorderThickness="0,0,0,0" >
<TextBlock Text="{Binding Path=Text,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
Background="White" Padding="3" />
</Border>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z">
</Path>
</Grid>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup
Name="Popup"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="1" Background="White"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" DataContext="{Binding}">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<DataTrigger Binding="{Binding Path=SelectAll, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}" Value="false" >
<Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 2 2 L 8 0 Z" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ComboBox.Template>
</ComboBox>
Right now it is giving errors that say The name Arrow is not recognized, and the member Data is not recognized or is not accessible.
It's also possible that the SelectAll path that I'm trying to trigger off of does not work either. The CodeProject code didn't seem to have that property fully implemented. I'll deal with that possibility later.
Thanks in advance for any answers or suggestions.
The name Arrow is out of scope in the ComboBox ControlTemplate, because it's defined in the ToggleButton ControlTemplate. The solution turns out to be easy: Just put the trigger in the template where the target control is in scope.
<ToggleButton.Template>
<ControlTemplate>
<Grid>
<!-- snip snip snip -->
<!-- snip snip snip -->
<!-- snip snip snip -->
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
>
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger
Binding="{Binding Path=SelectAll, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
Value="false" >
<Setter
TargetName="Arrow"
Property="Data"
Value="M 0 0 L 2 2 L 8 0 Z"
/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
I'm assuming that SelectAll is a boolean dependency property, and a member of MultiSelectComboBox, because that seems to be implied by what you're doing with it. Here's my dependency property definition:
public static readonly DependencyProperty SelectAllProperty =
DependencyProperty.Register("SelectAll", typeof(bool), typeof(MultiSelectComboBox),
new PropertyMetadata(false));
And here's the test XAML I used:
<StackPanel
Orientation="Vertical"
>
<CheckBox Content="SelectAll" x:Name="SelectAllCheckBox" />
<local:MultiSelectComboBox
SelectAll="{Binding IsChecked, ElementName=SelectAllCheckBox}" />
</StackPanel>

Custom WPF-WindowStyle: How to recognize click on custom help button?

I've got a custom Style for my WPF Windows. One part of it is an additional HelpButton next to the regular minimize, maximize and Close button. Assigning this style to my Windows works as expected, but how does my window notice that this button was clicked? The button is defined in the style so my window does not really know about it. Here's the code for the style:
<ResourceDictionary x:Class="Company.Common.Themes.CompanyWindowStyle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/CompanyWindowBaseStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="CompanyWindowStyle"
BasedOn="{StaticResource CompanyWindowBaseStyle}"
TargetType="{x:Type Window}">
<Setter Property="ResizeMode"
Value="CanResize" />
<EventSetter Event="Loaded"
Handler="WindowLoaded" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border x:Name="PART_Container"
Padding="7,7,7,5">
<Grid TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType">
<Border x:Name="PART_Border"
Width="Auto"
Height="Auto"
Background="{StaticResource BackgroundBrush}"
BorderBrush="{StaticResource BorderBrush}"
BorderThickness="1">
<DockPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent">
<Border x:Name="TitleBar"
Background="{StaticResource BackgroundBrush}"
BorderThickness="0"
DockPanel.Dock="Top"
MouseDown="TitleBarMouseDown">
<Grid Height="32"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36" />
<ColumnDefinition />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
<ColumnDefinition Width="34" />
</Grid.ColumnDefinitions>
<ContentControl Grid.Column="0"
MouseDoubleClick="IconMouseDoubleClicked">
<Image x:Name="Icon"
Width="32"
Height="32"
Margin="4,-7,0,7"
HorizontalAlignment="Right"
WindowChrome.IsHitTestVisibleInChrome="True"
Source="{Binding Path=Icon,
Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}" />
</ContentControl>
<TextBlock x:Name="Caption"
Grid.Column="1"
Margin="4,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe UI"
FontSize="12"
Opacity="0.66"
Text="{Binding Path=Title,
Mode=OneWay,
RelativeSource={RelativeSource TemplatedParent}}" />
<Button x:Name="HelpButton"
Grid.Column="2"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="HelpButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<TextBlock Text="?" FontSize="14"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}" />
</Grid>
</Button>
<Button x:Name="MinButton"
Grid.Column="3"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="MinButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path Data="M0,8 H8 M0,7 H8 M0,6 H8"
RenderOptions.EdgeMode="Aliased"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1" />
</Grid>
</Button>
<Button x:Name="MaxButton"
Grid.Column="4"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="MaxButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path x:Name="PART_MaxButton_Path"
Data="M0,0 H8 V8 H0 V0 M0,1 H8 M0,2 H8"
RenderOptions.EdgeMode="Aliased"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1" />
</Grid>
</Button>
<Button x:Name="CloseButton"
Grid.Column="5"
Width="34"
Height="26"
VerticalAlignment="Top"
Click="CloseButtonClick"
Style="{StaticResource TitleBarButtonStyle}"
WindowChrome.IsHitTestVisibleInChrome="True">
<Grid MaxWidth="9"
MaxHeight="9">
<Path Data="M0,0 L8,8 M0,8 L8,0"
Stretch="None"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}"
StrokeThickness="1.5" />
</Grid>
</Button>
</Grid>
</Border>
<ContentPresenter />
</DockPanel>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState"
Value="Maximized">
<Setter TargetName="PART_MaxButton_Path"
Property="Data"
Value="M0,3 H5 V8 H0 V3 M0,4 H5 M3,0 H8 V5 H7 M3,1 H8" />
</Trigger>
<Trigger Property="WindowState"
Value="Normal">
<Setter TargetName="PART_Border"
Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="7"
Direction="315"
Opacity="0.5"
ShadowDepth="2"
Color="black" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsActive"
Value="False">
<Setter TargetName="PART_Border"
Property="BorderBrush"
Value="{StaticResource BorderBrushInactive}" />
</Trigger>
<Trigger Property="IsActive"
Value="True">
<Setter TargetName="PART_Border"
Property="BorderBrush"
Value="{StaticResource BorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I have somehow no idea how it is done. Can someone please point me in the right direction?
UPDATE:
This is the header of my MainWindow's XAML where I use the Style:
<Window x:Class="Company.MainGUI.GUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:Company.Common;assembly=Company.Common"
xmlns:controls="clr-namespace:Company.Common.Controls;assembly=Company.Common.Controls"
xmlns:l="clr-namespace:Company.Common.Languages;assembly=Company.Common.Languages"
xmlns:local="clr-namespace:Company.MainGUI.GUI"
Title="{x:Static l:Common_Text.Application_Name}"
UseLayoutRounding="True"
MinWidth="900"
MinHeight="600"
Icon="pack://application:,,,/Company.Common.Images;component/Resources/ApplicationLogo_MainGUI.ico"
WindowStartupLocation="CenterScreen">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/CompanyWindowStyle.xaml" />
<ResourceDictionary Source="pack://application:,,,/Company.Common.Themes;component/MainGUISkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Window.Style>
<Style TargetType="{x:Type local:MainWindow}"
BasedOn="{StaticResource CompanyWindowStyle}" />
</Window.Style>

show grid in expander.

I m trying to create the expander with the header on right side and than add a grid to that exapnder. when i run this grids textblock doesnt apper. And like to know what are best way to create expander header on right side.
<StackPanel >
<Expander Header="Customer Detail" IsExpanded="False" Style="{StaticResource MainViewExpander}" >
<Expander.Content>
<StackPanel HorizontalAlignment="Stretch">
<Grid x:Name="ImageInformation" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.8*"/>
<ColumnDefinition Width="1.4*"/>
<ColumnDefinition Width="2.8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="0.7*" />
<RowDefinition Height="0.7*" />
</Grid.RowDefinitions>
<Image Source="{Binding XPath=x.null}" Grid.Column="0" Grid.RowSpan="3"/>
<TextBlock Name="Customername"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="Customer Name"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
TextWrapping="NoWrap" Margin="0,0,0,13" Width="140" Height="22"/>
<TextBlock Name="Born"
Grid.Column="1"
Grid.Row="1"
Text="Born"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="BornDetail"
Grid.Column="2"
Grid.Row="1"
Text="BornDetail"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" />
<TextBlock Name="Speak"
Grid.Column="1"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="60" />
<TextBlock Name="SpeakDetail"
Grid.Column="2"
Grid.Row="2"
Text="Speak"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextWrapping="NoWrap" Margin="2" Width="125" Height="16" MaxHeight="20" MaxWidth="135"/>
</Grid>
<Grid Height="150" Width="295">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" ></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
<RowDefinition Height="1.2*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="" Grid.Column="0" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="3" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="3" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="0" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
<TextBlock Text="" Grid.Column="1" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
</Grid>
</StackPanel>
</Expander.Content>
</Expander>
</StackPanel>
My stylesheet is something like this:
<UserControl.Resources >
<!-- Main Expander Header Brushes -->
<SolidColorBrush x:Key="MainExpanderHeaderBackgroundBrush" Color="#FF3771C1"/>
<SolidColorBrush x:Key="MainExpanderHeaderBorderBrush" Color="Black"/>
<!-- Main Expander Content Brushes -->
<SolidColorBrush x:Key="MainExpanderContentBorderBrush" Color="Black" />
<!-- Main Expander Control Brushes (affect the whole control, not just header or content -->
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="White" />
<SolidColorBrush x:Key="MainExpanderControlDisabledForegroundBrush" Color="DarkGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBackgroundBrush" Color="LightGray" />
<SolidColorBrush x:Key="MainExpanderControlDisabledBorderBrush" Color="LightGray" />
<!-- Main Expander Toggle Button Brushes -->
<SolidColorBrush x:Key="ExpanderToggleButtonBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="ExpanderToggleButtonMouseOverFillBrush" Color="Green" />
<SolidColorBrush x:Key="ExpanderToggleButtonPressedFillBrush" Color="Yellow" />
<!-- Expander Toggle Button Template -->
<ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
<!-- Note, the chevron toggle button gets its forground color from the templated parent.
The parent must set this to a valid color when it is disabled. -->
<Path
Name="Chevron"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 10 10 L 20 0 Z"
Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="Chevron" Property="Data" Value="M 0 10 L 10 0 L 20 10 Z" />
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonMouseOverFillBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonPressedFillBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="MainViewExpander" TargetType="Expander">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlNormalForegroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Expander">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Name="ContentRow"/>
</Grid.RowDefinitions>
<Border
Name="HeaderBorder"
Grid.Row="0"
BorderThickness="1"
CornerRadius="0,0,0,0"
BorderBrush="{StaticResource MainExpanderHeaderBorderBrush}"
Background="{StaticResource MainExpanderHeaderBackgroundBrush}"
>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0"
Margin="4"
ContentSource="Header"
RecognizesAccessKey="True"
/>
<ToggleButton
Grid.Column="1"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Template="{StaticResource ExpanderToggleButton}"
Background="{StaticResource ExpanderToggleButtonBackgroundBrush}"
/>
</Grid>
</Border>
<Border
Name="ContentBorder"
Grid.Row="1"
BorderBrush="{StaticResource MainExpanderContentBorderBrush}"
BorderThickness="1,0,1,1"
CornerRadius="0,0,0,0"
>
<ContentPresenter Margin="4" />
</Border>
</Grid>
<!-- Triggers for the entire Expander Control -->
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource MainExpanderControlDisabledForegroundBrush}"/>
<Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource MainExpanderControlDisabledBackgroundBrush}" />
<Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
<Setter TargetName="ContentBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="{StaticResource MainExpanderControlNormalForegroundBrush}"
FontSize="18"
FontWeight="Bold"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainViewExpanderCommands"
BasedOn="{StaticResource MainViewExpander}"
TargetType="Expander"
>
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</UserControl.Resources >
so how to get the data of grid in expander?
There are three problems
The MainExpanderControlNormalForegroundBrush was White, so nothing was visible in the expander content area. Change it to black as shown below.
<SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="Black" />
In one of the triggers you are binding to an element with nameContent which is not there. You should be binding to ContentBorder as shown below.
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=ContentBorder, Path=DesiredHeight}" />
</Trigger>
Set your ContentRow Height to 0 to bring the expander functionality.
<RowDefinition Name="ContentRow" Height="0"/>

DataTrigger in ControlTemplate does not work

I am new here and hope my first question meets stack overflow's requirements. I have done some research so far but could not figure it out myself.
I create a UserControl (derived from an intermediate base Class) which should be able to change a color sign to a different color depending on its "VisualAlarmState" Property which is a DependencyProperty.
The Style plus ControlTemplate are rendered as expected but the DataTrigger at the end of the style does not change the color (=image) of VisualAlarmSign which is an Image element.
The code can be compiled and run without errors but the alarm state will not be shown as expected.
Something I do ot really understand either: I have to reference the Style dynamically because Style="{StaticResource DashboardItemStyle}" will be underlinded and at mouse hover says: "The resource "DashboardItemStyle" could not be resolved."
<ucbase:DashboardItemBase.Resources>
<BitmapImage x:Key="MO-Zylinderdeckel" UriSource="/ModuleDashboard;component/Resources/MO-Zylinderdeckel.tif" />
<BitmapImage x:Key="MO-Zylindermantel" UriSource="/ModuleDashboard;component/Resources/MO-Zylindermantel.tif" />
<BitmapImage x:Key="MO-Zylinderboden" UriSource="/ModuleDashboard;component/Resources/MO-Zylinderboden.tif" />
<BitmapImage x:Key="MO-Marker-Grün" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Grün.tif" />
<BitmapImage x:Key="MO-Marker-Orange" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Orange.tif" />
<BitmapImage x:Key="MO-Marker-Rot" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Rot.tif" />
<Style x:Key="DashboardItemStyle" TargetType="{x:Type ucbase:DashboardItemBase}">
<Setter Property="Template" x:Name="Template1">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ucbase:DashboardItemBase}">
<dxlc:Tile x:Name="Tile" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
Height="128.5" Width="208.5" Background="{x:Null}">
<dxlc:Tile.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="11.5" />
<RowDefinition Height="*" />
<RowDefinition Height="12.5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6.5" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
Source="{StaticResource MO-Zylinderdeckel}" />
<Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6.5" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="2"
HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
Source="{StaticResource MO-Zylindermantel}" />
<Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Height="14"
Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
VerticalAlignment="Top" Source="{StaticResource MO-Marker-Grün}" />
</Grid>
<Image Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="3" Grid.RowSpan="1"
HorizontalAlignment="Stretch" Stretch="Fill" VerticalAlignment="Stretch"
Source="{StaticResource MO-Zylinderboden}" />
</Grid>
</dxlc:Tile.Content>
</dxlc:Tile>
<ControlTemplate.Triggers>
<!-- This Trigger has no effect. Why?-->
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisualAlarmState}">
<DataTrigger.Value>
<vmbase:AlarmState>Alarm</vmbase:AlarmState>
</DataTrigger.Value>
<Setter TargetName="VisualAlarmSign" Property="Source"
Value="{StaticResource MO-Marker-Rot}" />
</DataTrigger> </ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ucbase:DashboardItemBase.Resources>
Working Solution
I removed Source={StaticResource MO-Marker-Grün} from the <Image> element and I moved the <DataTrigger> from <ControlTemplate.Triggers> to <Style.Triggers> in <Image.Style> which resulted in the following XAML code:
<ucbase:DashboardItemBase.Resources>
...
<BitmapImage x:Key="MO-Marker-Rot" UriSource="/ModuleDashboard;component/Resources/MO-Marker-Rot.tif" />
...
<Style x:Key="DashboardItemStyle" TargetType="{x:Type ucbase:DashboardItemBase}">
<Setter Property="Template" x:Name="Template1">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ucbase:DashboardItemBase}">
<dxlc:Tile x:Name="Tile" Grid.Column="0" Grid.ColumnSpan="1" Grid.Row="0" Grid.RowSpan="1"
Height="128.5" Width="208.5" Background="{x:Null}">
<dxlc:Tile.Content>
<Grid>
...
<Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"
Height="14" Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
VerticalAlignment="Top" >
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=VisualAlarmState}"
Value="Alarm">
<Setter Property="Image.Source"
Value="{StaticResource MO-Marker-Rot}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
...
</Grid>
</dxlc:Tile.Content>
</dxlc:Tile>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ucbase:DashboardItemBase.Resources>
Try setting the source of image using style property setter. Some how trigger behave wired.
<Image x:Name="VisualAlarmSign" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Height="14"
Margin="0,20,0,0" Width="19.5" HorizontalAlignment="Right"
VerticalAlignment="Top">
<Image.Style>
<Style>
<Setter TargetName="VisualAlarmSign" Property="Source"
Value="{StaticResource MO-Marker-Grün}" />
</Style>
</Image.Style>
</Image>
Make sure to remove the source property in the image tag.
Some how triggers may not set properties we have used in the tag. in your case you set the value of source in the image tag. if you set the same value through style setter it may worm. its worth a try.

Resources