I am trying to have p:MarqueeTextBlock to only scroll on ListBox IsSelected under TargetType="{x:Type ListBoxItem}".
Having trouble to work out adding a MultiTrigger conditions (fired when IsSelected becomes True or False) to change the Property="Scroll" of the p:MarqueeTextBlock to Off or LeftTypewriter. In addition not sure how to reference the p:MarqueeTextBlock in the DataTemplate; perhaps if I provide it an x:Name? However I get Template property has already been set on DataTemplate.
I need to add AOTbMain_MARQUEE somehow in x:Key="ListBoxStyle_GAME" like:
<p:MarqueeTextBlock Text="{Binding Path=Title}" Style="{StaticResource AOTbMain_MARQUEE}"/>
Code with above reference not added:
<UserControl
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:p="clr-namespace:Plugin.Controls;assembly=Plugin.v1"
mc:Ignorable="d"
d:DesignHeight="2160" d:DesignWidth="3840">
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Image x:Name="SelectedGameOverlay" Source="{}pack://siteoforigin:,,,/Images/Selected Game Overlay.png" RenderOptions.BitmapScalingMode="HighQuality" Visibility="Hidden" />
<ContentPresenter x:Name="SelectedGameTextColour" HorizontalAlignment="Left" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Opacity" Value="1" />
<Setter TargetName="SelectedGameOverlay" Property="Visibility" Value="Visible" />
<Setter TargetName="SelectedGameTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Opacity" Value="1" />
<Setter TargetName="SelectedGameOverlay" Property="Visibility" Value="Visible" />
<Setter TargetName="SelectedGameTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle" TargetType="p:AutoscrollListBox">
<Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="ListBoxStyle_BASE" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle}">
<Setter Property="ScrollMode" Value="Center" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemStyle}">
<Setter Property="Padding" Value="1" />
</Style>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="AOTbMain_MARQUEE" TargetType="p:MarqueeTextBlock">
<Setter Property="Scroll" Value="LeftTypewriter" />
<Setter Property="ScrollDelayBeg" Value="0:0:5" />
<Setter Property="ScrollDelayEnd" Value="0:0:3" />
<Setter Property="ScrollSpeed" Value="0:0:5" />
</Style>
<Style x:Key="ListBoxStyle_BASE_INDXFADER" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle_BASE}">
<Style.Triggers>
<DataTrigger Binding="{Binding IndexVisibility}" Value="Visible">
<Setter Property="Opacity" Value="0.1" />
</DataTrigger>
<DataTrigger Binding="{Binding IndexVisibility}" Value="Hidden">
<Setter Property="Opacity" Value="1" />
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="ListBoxStyle_BASETB" TargetType="p:AutoscaleTextBlock">
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="TargetFontSize" Value="30" />
</Style>
<Style x:Key="ListBoxStyle_GAME" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle_BASE_INDXFADER}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<p:AutoscaleTextBlock Text="{Binding Path=Title}" Style="{StaticResource ListBoxStyle_BASETB}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxItemStyleSearch" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<ContentPresenter x:Name="SelectedSearchTextColour" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True" />
<Setter Property="Opacity" Value="1" />
<Setter TargetName="SelectedSearchTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyleSearch" TargetType="p:AutoscrollListBox">
<Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyleSearch}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
</Style>
<Style x:Key="ListBoxStyle_INDX" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyleSearch}">
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemStyleSearch}">
<Setter Property="Padding" Value="1" />
</Style>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Viewbox HorizontalAlignment="Left">
<p:AutoscrollListBox Name="Index" Style="{StaticResource ListBoxStyle_INDX}" Visibility="{Binding IndexVisibility}" />
</Viewbox>
<p:AutoscrollListBox Name="Items" Style="{StaticResource ListBoxStyle_GAME}" />
</Grid>
</UserControl>
The following Style will show the AutoscrollListBox as content of the DataTemplate. Once the ListBoxItem is selected it will display the MarqueeTextBlock instead. If unselected it will switch back to the AutoscrollListBox.
Solution 1
<Grid>
<AutoscrollListBox Name="Items" >
<AutoscrollListBox.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<AutoscaleTextBlock x:Key="AutoscaleTextBlock"
Text="{Binding Title}"
Style="{StaticResource ListBoxStyle_BASETB}"
x:Shared="False" />
<MarqueeTextBlock x:Key="MarqueeTextBlock"
Text="{Binding Title}"
Style="{StaticResource AOTbMain_MARQUEE}"
x:Shared="False" />
</DataTemplate.Resources>
<ContentControl x:Name="ContentPresenter" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
Value="False">
<Setter TargetName="ContentPresenter"
Property="Content"
Value="{StaticResource AutoscaleTextBlock}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
Value="True">
<Setter TargetName="ContentPresenter"
Property="Content"
Value="{StaticResource MarqueeTextBlock}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</AutoscrollListBox.ItemTemplate>
</AutoscrollListBox>
</Grid>
Solution 2
In case you are working with nested resource dictionaries and can't apply the x:Shared attribute you can swap the controls directly from the Trigger:
<Grid>
<AutoscrollListBox Name="Items" >
<AutoscrollListBox.ItemTemplate>
<DataTemplate>
<ContentControl x:Name="ContentPresenter" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
Value="False">
<Setter TargetName="ContentPresenter"
Property="Content">
<Setter.Value>
<AutoscaleTextBlock Text="{Binding Title}"
Style="{StaticResource AOTbMain_MARQUEE}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
Value="True">
<Setter TargetName="ContentPresenter"
Property="Content">
<Setter.Value>
<MarqueeTextBlock Text="{Binding Title}"
Style="{StaticResource AOTbMain_MARQUEE}"/>
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</AutoscrollListBox.ItemTemplate>
</AutoscrollListBox>
</Grid>
Solution 3
Or toggle the Visibility:
<Grid>
<AutoscrollListBox Name="Items" >
<AutoscrollListBox.ItemTemplate>
<DataTemplate>
<Grid>
<AutoscaleTextBlock x:Name="AutoscaleTextBlock"
Text="{Binding Title}"
Style="{StaticResource AOTbMain_MARQUEE}"
Visibilty="Visible" />
<MarqueeTextBlock x:Name="MarqueeTextBlock"
Text="{Binding Title}"
Style="{StaticResource AOTbMain_MARQUEE}"
Visibilty="Collapsed" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}"
Value="True">
<Setter TargetName="AutoscaleTextBlock"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="MarqueeTextBlock"
Property="Visibility"
Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</AutoscrollListBox.ItemTemplate>
</AutoscrollListBox>
</Grid>
Related
I need some advice. I have a ListBox that has sorted items in the Wrappanel. When I hover the mouse pointer over an item in the ListBox, I would like to see something like Popup so that it can only be seen in the control area (the ListBox) and has a static position.
Something similar to the picture:
We have only documented this. My popup is also outside of the ListBox area.
see picture:
My idea:
My current code:
<DataTemplate x:Key="ItemTemplate">
<Grid Effect="{DynamicResource z-depth2}"
Width="185" Height="278"
Background="{DynamicResource RG_WindowBackgroundBrush}"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Grid.Resources>
<DropShadowEffect x:Key="z-depth2" BlurRadius="8" ShadowDepth="2.5" Direction="270" Color="{DynamicResource RG_DropShadowEffect}" />
</Grid.Resources>
<Rectangle x:Name="Rectangle1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" Height="0" />
<controls:ItemTracer HorizontalAlignment="Stretch"
Container="{Binding ., RelativeSource={RelativeSource AncestorType={x:Type controls:VirtualizingTilePanel}}}"
ContainerWidth="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type controls:VirtualizingTilePanel}}}"
ItemIndex="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
ItemsCount="{Binding Items.Count, RelativeSource={RelativeSource AncestorType={x:Type controls:AnimatedListBox}}}"
x:Name="lastInLine"/>
<cachedImage:Image Width="185" Height="278" Stretch="UniformToFill" ImageUrl="{Binding MoviePoster}"
RenderOptions.BitmapScalingMode="HighQuality" RenderOptions.EdgeMode="Aliased" SnapsToDevicePixels="True"
UseLayoutRounding="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<controls:NonTopmostPopup x:Name="Popup" IsOpen="False" Width="400" Height="200"
PlacementTarget="{Binding ElementName=Rectangle1}"
AllowsTransparency="True"
PopupAnimation="None"
VerticalOffset="0">
<controls:NonTopmostPopup.Style>
<Style TargetType="{x:Type controls:NonTopmostPopup}">
<Setter Property="HorizontalOffset" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="0">
</DataTrigger>
<DataTrigger Binding="{Binding IsLastItem, ElementName=lastInLine}" Value="true" >
</DataTrigger>
<DataTrigger Binding="{Binding IsLastInLine, ElementName=lastInLine}" Value="true" >
<Setter Property="HorizontalOffset" Value="-200" />
</DataTrigger>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Value="1">
</DataTrigger>
</Style.Triggers>
</Style>
</controls:NonTopmostPopup.Style>
<Grid Background="Blue">
</Grid>
</controls:NonTopmostPopup>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Setter TargetName="Popup" Property="IsOpen" Value="True" />
</DataTrigger>
</DataTemplate.Triggers>
<Style x:Key="ListBoxMovieItem" TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}" />
<Setter Property="Foreground" Value="{DynamicResource RG_ForegroundBrush}" />
<Setter Property="Margin" Value="2"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}" >
<ContentPresenter Panel.ZIndex="1"/>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="IsSelected" Value="True"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type controls:AnimatedListBox}">
<Setter Property="ItemContainerStyle" Value="{DynamicResource ListBoxMovieItem}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<controls:VirtualizingTilePanel
ChildHeight="300" x:Name="VirtualizingTilePanel"
ChildWidth="220"
IsVirtualizing="True"
VirtualizationMode="Recycling" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:AnimatedListBox}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
<controls:AnimatedScrollViewer
x:Name="PART_AnimatedScrollViewer"
CanKeyboardScroll="True"
Padding="{TemplateBinding Padding}"
Focusable="false"
ScrollingSpline="0,0.50,0.50,1" ScrollingTime="00:00:00.8000000" >
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</controls:AnimatedScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<controls:AnimatedListBox x:Name="AnimatedListBox"
ScrollViewer.CanContentScroll="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
ItemsSource="{Binding MoviesCvs.View, IsAsync=True}"/>
Thanks a lot. Excuse my English
I've a problem with a WPF ListBox ( See code bellow ). I'm trying to change the background and foreground for the listBox items when the mouse is over or when the item is selected but it doesn't work and I don't know why.
<ListBox x:Name="ListBoxSnapshots" ItemsSource="{Binding DevicesImageList}" SelectedIndex="{Binding WebcamSelected}" BorderThickness="0" SelectionMode="Single" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" SelectionChanged="ListBoxSnapshots_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFBCBCBC"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="#FFD3D3D3"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFD3D3D3"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="DarkGray">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Path=theImage}" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="142" Height="80"/>
<Canvas Width="142" Height="80" Margin="-142,0,0,0">
<Image Source="/MyApp;component/Images/snapshot-whitetriangle.png" Stretch="Fill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
<Label FontSize="8" Content="{Binding Path=theImageIndex}" Foreground="DarkGray" FontWeight="DemiBold" Canvas.Top="61" Canvas.Left="110" HorizontalAlignment="Center" VerticalAlignment="Top" Width="34" Height="24" VerticalContentAlignment="Top" HorizontalContentAlignment="Right" />
</Canvas>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
My listBox looks like the following picture.
The border of the Item selected has not the color that I have applied using Style.
Thanks,
Well, unfortunately it's not so easy... You need to change default ControlTemplate of ListBoxItem. Basing on this answer I've tried to make it look as i thought you wanted it to look. The most important elements are in <Setter Property="Template"> setter.
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Padding" Value="4,1" />
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,
RelativeSource={RelativeSource FindAncestor,
AncestorLevel=1,
AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
Background="White"
BorderBrush="DarkGray"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFBCBCBC" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="False" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFD3D3D3" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="#FFD3D3D3" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Bd"
Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a style defined in a resource dictionary to make my checkbox look like a button:
<Style TargetType="CheckBox" x:Key="CBCheckBoxButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Border Name="BackgroundBorder" Background="Black" CornerRadius="20">
<Grid>
<Rectangle x:Name="UpperRect" Margin="1" Grid.Row="0" RadiusX="20" RadiusY="20" Fill="{StaticResource GrayGradient}"/>
<TextBlock Name="ButtonContent" Text="{TemplateBinding Content}" Margin="3" VerticalAlignment="Center" TextAlignment="Center" TextWrapping="Wrap" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="UpperRect" Property="Fill" Value="{StaticResource LightBlueGradient}" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="UpperRect" Property="Fill" Value="{StaticResource BlueGradient}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BackgroundBorder" Property="Background" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Effect" Value="{StaticResource ShadowEffect}" />
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Calibri"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Effect" Value="{StaticResource DisableShadowEffect}" />
</Trigger>
</Style.Triggers>
</Style>
When used like so it works great:
<CheckBox Width="80" Height="80" Margin="10" Content="{Binding Y2LockAxisString}" Command="{Binding Y2LockDisableEnableCommand}" Style="{StaticResource CBCheckBoxButton}"/>
But I need to add a style so that different commands etc. are called depending on the state of the check box. So I used the basedon property:
<CheckBox Width="80" Height="80" Margin="10">
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CBCheckBoxButton}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Command" Value="{Binding ExecuteX2LockDisable}" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Command" Value="{Binding ExecuteX2LockEnable}" />
</Trigger>
</Style.Triggers>
</Style>
</CheckBox>
But the checkbox looks like a default checkbox with none of the appearance elements applied to it.
Why isn't the appearance style working?
It seems you are adding the Style as Content, instead of Style.
Have you tried
<CheckBox Width="80" Height="80" Margin="10">
<CheckBox.Style>
<Style --- snip --->
</Style>
</CheckBox.Style>
</CheckBox>
In the following example I copy pasted the full style of MenuItem into my UserControll just to add the property
<Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />
The reason for doing it was that I needed to attach a callback to my MenuItems such my viewmodels can do actions based on the clicks. Are there any other way where I could have achieved the same thing?
I tryed using the BasedOn property and creating a inhered style. Problem was that I am using the VisualStudio Theme for mahapps and the style for MenuItem is created with no name/key in the following file:
https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/VS/Menu.xaml
<Menu Grid.Column="0" SnapsToDevicePixels="True" Margin="2,0,0,0" x:Name="Plugins" >
<Menu.Resources>
<HierarchicalDataTemplate ItemsSource="{Binding MenuItems}" DataType="{x:Type sap:MenuItemViewModel}">
<ContentPresenter Content="{Binding Caption}" RecognizesAccessKey="True" >
</ContentPresenter>
</HierarchicalDataTemplate>
</Menu.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="cal:Message.Attach" Value="MenuEntryClicked($dataContext)" />
<Setter Property="Foreground"
Value="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<!--Border 1-->
<Border x:Name="Border"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="1"
SnapsToDevicePixels="False">
<Grid x:Name="Grid">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0"
MinWidth="17"
Width="Auto"
SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="MenuTextColumnGroup" />
<ColumnDefinition Width="Auto"
SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition x:Name="Col3"
Width="14" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
x:Name="Icon"
VerticalAlignment="Center"
ContentSource="Icon" />
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"
VerticalAlignment="Center" />
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center" />
<Grid Grid.Column="3"
Margin="4,0,6,0"
x:Name="ArrowPanel"
VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Fill="{TemplateBinding Foreground}"
Data="M0,0 L0,8 L4,4 z" />
</Grid>
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Right"
HorizontalOffset="-1"
x:Name="SubMenuPopup"
Focusable="false"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
AllowsTransparency="True">
<Grid Margin="0,0,5,5">
<!--Border 2-->
<Border x:Name="SubMenuBorder"
BorderBrush="{StaticResource MenuSeparatorBorderBrush}"
BorderThickness="1"
Background="{StaticResource SubmenuItemBackground}"
SnapsToDevicePixels="True">
<Grid x:Name="SubMenu"
Grid.IsSharedSizeScope="True"
Margin="2">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Grid>
<Border.Effect>
<DropShadowEffect ShadowDepth="2"
Color="Black" />
</Border.Effect>
</Border>
<!--Border 3-->
<Border Margin="1,0,0,0"
x:Name="TransitionBorder"
Width="0"
Height="2"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Background="{StaticResource SubmenuItemBackground}"
SnapsToDevicePixels="False"
BorderThickness="1"
BorderBrush="{StaticResource SubmenuItemBackground}" />
</Grid>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Role"
Value="TopLevelHeader">
<Setter Property="Padding"
Value="6,0,6,2" />
<Setter TargetName="SubMenuPopup"
Property="Placement"
Value="Bottom" />
<Setter TargetName="Col0"
Property="MinWidth"
Value="0" />
<Setter TargetName="Col3"
Property="Width"
Value="Auto" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="IGTHost"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="SubMenuBorder"
Property="BorderThickness"
Value="1,1,1,1" />
<Setter TargetName="SubMenu"
Property="Margin"
Value="2,3,2,2" />
<Setter TargetName="TransitionBorder"
Property="Width"
Value="{Binding ActualWidth, ElementName=Grid}" />
</Trigger>
<Trigger Property="Role"
Value="TopLevelItem">
<Setter Property="Padding"
Value="6,0,6,2" />
<Setter TargetName="Col0"
Property="MinWidth"
Value="0" />
<Setter TargetName="Col3"
Property="Width"
Value="Auto" />
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="IGTHost"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuHeader">
<Setter Property="DockPanel.Dock"
Value="Top" />
<Setter Property="Padding"
Value="10,3,0,3" />
<Setter TargetName="Border"
Property="MinHeight"
Value="22" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuItem">
<Setter Property="DockPanel.Dock"
Value="Top" />
<Setter Property="Padding"
Value="10,3,0,3" />
<Setter TargetName="Border"
Property="MinHeight"
Value="22" />
<Setter TargetName="ArrowPanel"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="TopLevelHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource MenuItemHighlightedBackground}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="TopLevelItem" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource MenuItemHighlightedBackground}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="SubmenuHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted"
Value="true" />
<Condition Property="Role"
Value="SubmenuItem" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackgroundHighlighted}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSubmenuOpen"
Value="true" />
<Condition Property="Role"
Value="TopLevelHeader" />
</MultiTrigger.Conditions>
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SubmenuItemBackground}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource MenuSeparatorBorderBrush}" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="1,1,1,0" />
</MultiTrigger>
<Trigger Property="IsSubmenuOpen"
Value="true">
<Setter TargetName="ArrowPanelPath"
Property="Fill"
Value="{StaticResource BackgroundSelected}" />
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation"
Value="true">
<Setter TargetName="SubMenuPopup"
Property="PopupAnimation"
Value="None" />
</Trigger>
<Trigger Property="Icon"
Value="{x:Null}">
<Setter TargetName="Icon"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{StaticResource MenuDisabledForeground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Menu>
here are two workarounds, before the issue is fixed at mahapps.metro
1) copy the whole style and give it a key and use this key in your code
2) or just use the menu style where you need it.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/VS/Menu.xaml" />
</ResourceDictionary.MergedDictionaries>
hope that helps
I have the following xaml-Code:
<Border x:Name="border">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding MessageType}" Value="Error">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Rectangle>
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding MessageType}" Value="Error">
<Setter Property="Fill" Value="Icon.ico" />
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Border>
(MessageType is a Enum)
How can i combine this two StyleTrigger into One? Is it possible?
Not sure what your parent object is, containing the border. But i assume a DataTemplate, other objects should be work similar.
<DataTemplate>
<Border x:Name="border">
<Rectangle x:Name="rect"/>
<Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding MessageType}" Value="Error">
<Setter TargetName="border" Property="Background" Value="Red" />
<Setter TargetName="rect" Property="Fill" Value="Icon.ico" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
Updated for comments:
<UserControl>
<UserControl.Resources>
<DataTemplate x:Key="myTemplate">
<!-- above template -->
</DataTemplate>
</UserControl.Resources>
<Grid>
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource myTemplate}"/>
</Grid>
</UserControl>