Datatrigger Change ImageBrush source - wpf

Currently am working on a reversi game and this is the ControlTemplate for a Stone on the board , Am using a DataTrigger to see who the Owner is for the Stone to set the button to the appropriate Image , But when I use TargetName on the setter (To the imagebrush wich is imga). I get an Error "Cannot find the Trigger target 'imga'. (The target must appear before any Setters, Triggers, or Conditions that use it.) "
but since I declared this brush before my setters this seems really strange to me. this code is in the app.xaml resources.
Thanks in advance
this is the relevant part of the button
<Style x:Key="0" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Height" Value="48"/>
<Setter Property="Width" Value="48" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse>
<Ellipse.Fill x:Uid="filler">
<ImageBrush x:Name="imga" ImageSource="afbeeldingen/vuur.jpg"/>
</Ellipse.Fill>
</Ellipse>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
</Trigger>
<DataTrigger Binding="{Binding Owner.Value.ArrayIndex}" Value="0">
<DataTrigger.Setters>
<Setter TargetName="imga" Property="ImageSource" Value="afbeeldingen/vuur.jpg" />
</DataTrigger.Setters>
</DataTrigger>

imga is not a part of your Template, it is a resource, so you cannot change its properties from a trigger. What you have to do is change the Fill property from you Ellipse instead. You would have Something like this :
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse x:Name="myEllipse">
<Ellipse.Fill x:Uid="filler">
<ImageBrush x:Name="imga" ImageSource="afbeeldingen/vuur.jpg"/>
</Ellipse.Fill>
</Ellipse>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
</Trigger>
<DataTrigger Binding="{Binding Owner.Value.ArrayIndex}" Value="0">
<DataTrigger.Setters>
<Setter TargetName="myEllipse" Property="Fill">
<Setter.Value>
<ImageBrush x:Name="imga" ImageSource="afbeeldingen/vuur.jpg"/>
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>

Related

WPF, how to style TabItem basing on TabControl's property?

I want to achieve similar effect, which can be seen in Notepad++: dividing TabContol into two TabControls. Obviously both will have selected tab on their own, but still only one of them will be active.
For those who doesn't know Notepad++, this is how it looks like:
For that I'll need to introduce "Active" property on TabControl (not Focused, because when one of TabControls loses focus, its selected tab still remains active). However, I have no idea how to craft trigger on TabItem's ControlTemplate, which will allow me to distinguish selected and selected+active tab.
This is how my current TabItem template look:
<Style x:Key="BaseRootTabItem" TargetType="TabItem">
<Style.Setters>
<Setter Property="Background" Value="{StaticResource NormalTabBackgroundBrush}" />
<Setter Property="TextBlock.Foreground" Value="{StaticResource NormalTabForegroundBrush}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="Background" Value="{StaticResource HoverTabBackgroundBrush}" />
<Setter Property="TextBlock.Foreground" Value="{StaticResource HoverTabForegroundBrush}" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="DocumentTabItem" TargetType="TabItem" BasedOn="{StaticResource BaseRootTabItem}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border x:Name="TabBorder" BorderThickness="1,1,1,0" BorderBrush="Transparent"
Background="{TemplateBinding Background}" TextBlock.Foreground="{TemplateBinding Foreground}">
<ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" Margin="6,2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="Background" Value="{StaticResource SelectedDocumentTabBackgroundBrush}" />
<Setter Property="Foreground" Value="{StaticResource SelectedDocumentTabForegroundBrush}" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
I need something like:
<Trigger Property="(Owning TabControlEx's Active property)" Value="True">
<Trigger.Setters>
...
</Trigger.Setters>
</Trigger>
Or maybe there's some other solution?
Since Active property doesn't belong to TabItem, Trigger won't work. Use DataTrigger with binding to parent:
<DataTrigger Binding="{Binding Active, RelativeSource={RelativeSource AncestorType=TabControlEx}}"
Value="True">
</DataTrigger>

Setting a different color for each tab using the same style

So I have the following style in my Window.Resources:
<Style TargetType="TabItem" x:Key="tiS">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Height="40" Width="186">
<Border Name="tiBorder" Background="Transparent">
<ContentPresenter ContentSource="Header"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.FontSize="20"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="90"/>
<Setter TargetName="tiBorder" Property="Background" Value="{DynamicResource tiB}"/>
<!--<Setter TargetName="tiBorder" Property="Margin" Value="0,-4,0,-4"/>-->
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="80"/>
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style is used on 5 TabItems, each with a different color given by 'DynamicResource tiB' in the trigger.
In each TabItem I have the following resource placed (Color1 is set in the Window.Resources):
<TabItem.Resources>
<SolidColorBrush x:Key="tiB" Color="{StaticResource Color1}"/>
</TabItem.Resources>
I was wondering, is there an easier way to do this or am I doing it right? This is the first time I'm working with styles in WPF so I want to do it right. (This code is working! Looking for a better (if there is one) solution to my situation.)
Here is the full code: http://pastebin.com/igwxgp6M
I believe this will work
<TabControl ...>
<TabControl.ItemsContainerStyle>
<Style TargetType="TabItem">
//Put triggers here
</Style>
<TabControl.ItemsContainerStyle>
</TabControl>

Defining a control template for a rectangle in XAML

In my current project, I have this XAML file where I define the visual style that must be applied to different types of custom widgets.
For example, the style for a 'DirectLineButton' (a custom class that inherits from WPF's Button) is as follows:
<Style x:Key="DirectLineButtonTemplate" TargetType="{x:Type View:DirectLineButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MyBorder"
CornerRadius="2"
BorderThickness="2"
Background="Gold"
BorderBrush="Gray">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineAvailable">
<Setter TargetName="MyBorder" Property="Background" Value="Gold"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineIdle">
<Setter TargetName="MyBorder" Property="Background" Value="Silver"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineBusy">
<Setter TargetName="MyBorder" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineCalled">
<Setter TargetName="MyBorder" Property="Background" Value="LightBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now, I need to replicate this idea by defining the style for a Rectangle. Unfortunately, WPF flags an error message when I try to define a ControlTemplate for a rectangle, can you suggest a workaround for this? See the code below of what I'm trying to attempt:
<Style x:Key="MyRectangleTemplate" TargetType="{x:Type Rectangle}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Rectangle}">
<Border x:Name="MyBorder"
CornerRadius="2"
BorderThickness="2"
Background="Gold"
BorderBrush="Gray">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineAvailable">
<Setter TargetName="MyBorder" Property="Background" Value="Gold"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineIdle">
<Setter TargetName="MyBorder" Property="Background" Value="Silver"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineBusy">
<Setter TargetName="MyBorder" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="View:DirectLineButton.State" Value="DirectLineCalled">
<Setter TargetName="MyBorder" Property="Background" Value="LightBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks in advance!
Hi you will have to do it with Border only.Controls that inherits FrameworkElement only can have Template . But Rectangle , Line etc are lighter versions they inherits only UIElement not FrameworkElement.I hope this will help. Conclusion: Rectange do not have Template property
You can't define a control template for a Rectangle, since it's not a control, but a Shape. You can only define a control template for classes derived from Control.
You should
1) use a Style (not a ControlTemplate) to have rounded borders.
2) Use a Trigger inside your style.
The following Xaml should get you closer from your goal :
<Style x:Key="MyRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Fill" Value="Blue"/>
<Setter Property="RadiusX" Value="2" />
<Setter Property="RadiusY" Value="2" />
<Style.Triggers>
<DataTrigger Binding="{Binding DirectLineState}"
Value="{x:Static l:DLS.Available}">
<Setter Property="Fill" Value="Gold"/>
</DataTrigger>
<DataTrigger Binding="{Binding DirectLineState}"
Value="{x:Static l:DLS.Idle}" >
<Setter Property="Fill" Value="Silver"/>
</DataTrigger >
<DataTrigger Binding="{Binding DirectLineState}"
Value="{x:Static l:DLS.Available}">
<Setter Property="Fill" Value="Green"/>
</DataTrigger >
<DataTrigger Binding="{Binding DirectLineState}"
Value="{x:Static l:DLS.Called}">
<Setter Property="Fill" Value="LightBlue"/>
</DataTrigger >
</Style.Triggers>
</Style>
(notice that :
1) i changed the key for "MyRectangleStyle".
2) If you want this Style to be the default Style, do not give it a Key, but just a TargetType...
3) ...OR set the Key to "{x:Type Rectangle}". msdn seems to prefer that way.
btw : shouldn't you be using DataTriggers on public properties instead of Triggers ? but i don't know the whole architecture of your application. )
Rq : for the code above to work, you need :
1) a public proprety called DirectLineState raising NotifyPropertyChanged on change.
2) an enum called DLS defined in a separate file (like a class) in your project
3) you need "l" to be your project NameSpace.
<xmlns:l="clr-namespace:MyProjectNameSpace" >
4) Assign Style and set proper DataContext for the Rectangle

WPF buttons (image & label) shadowing

I want to create buttons which have a image and a text included and get a nice shadowing. Particularly, I want the image and label have a light grey shadowing, but when moving the mouse over the button I'd like a kind of blue shadowing. Moving away sets it back to light grey. I would need some help as I just can't figure out how to achive it (I'm new to WPF).
The Buttons looks like ...
<Button>
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source="Images/preferences-system.png" />
<Label HorizontalAlignment="Center">Settings</Label>
</StackPanel>
</Button.Content>
</Button>
The Canvas goes ...
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Image}">
<Style.Setters>
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</Canvas.Resources>
What I get is a light grey shadowing on image and labels on begin. Moving the mouse over the button the grey and light blue get mixed. When moving further on the image it gets the light blue only. The same goes for the label.
How can I achive switching the shadowning to light blue when I mouse over the button and not the image and label itself? Anyone an idea or an completly other approach?
Apply the LightGray Effect to the ContentPresenter. Then on the IsMouseOver Trigger, set the Effect property of the ContentPresenter to the blue Effect.
NOTE: Accomplish this by setting the x:Name attribute of the ContentPresenter, then accessing the ContentPresenter by name via the Setter using TargetName.
NOTE: Remove the various other Effect settings in the styles of the child elements. Applying the Effect to the ContentPresenter causes the child elements to inherit the Effect.
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter x:Name="cp" Effect="{StaticResource dropLightShadow}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="cp" Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
</Style.Setters>
</Style>

WPF repeatbutton in scrollbar only triggers IsPressed from the template, not the style

I have a minor issue. We'd like to put as much stylistic items in the styles and outside of the control templates, to make themeing easier. So for the scrollbar's repeatbutton, I can get all of this to work but IsPressed. That only works from the template.
So the template is (basically):
<ControlTemplate x:Key="ScrollBarButtonCT" TargetType="{x:Type RepeatButton}">
<Border
x:Name="borderRepeatButton"
Margin="1"
CornerRadius="2"
Background="{TemplateBinding Background}">
<Path x:Name="pathArrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource ThumbBrush}"
Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="borderRepeatButton" Property="Background" Value="{DynamicResource ThumbPressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
And the style is
<Style x:Key="ScrollBarButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Background" Value="{DynamicResource ScrollBarBGBrush}"/> <!-- borderRepeatButton -->
<Setter Property="OpacityMask" Value="{DynamicResource ThumbBrush}"/> <!-- pathArrow-->
<Setter Property="Template" Value="{StaticResource ScrollBarButtonCT}"/>
<Style.Triggers>
<!--<Trigger Property="IsPressed" Value="true"> .... this doesn't work coming from the style
<Setter Property="Background" Value="{DynamicResource ThumbPressedBrush}" />
</Trigger>-->
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ScrollBarDisabledBGBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{DynamicResource ThumbHoverBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
I can't get IsPressed to work from the style. Looking in Snoop IsPressed is raised just fine when using the control. What am I doing wrong? Thanks!
No idea why it doesnt work, maybe it needs static resource? u can try this to get all styles in one place.
<Style x:Key="xxxtyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FFD5D5D5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ps TargetType="typeName" == TargetType="{x:Type typename}"
I know this is old, but it turns out this must be a bug in the template. We could never get it to work, and talking to some people on the inside more or less confirmed it. We just left the value in the template and worked around it by swapping templates when we needed a different RepeatButton style.

Resources