Have DrawingImage inherit color from containing Button - wpf

I have a few buttons that have a common style. This style has a ContentPresenter, which is filled with a DrawingImage in the button declaration.
This works just fine when the DrawingImage uses a predefined brush. However I would very much like my DrawingImage to use the Foreground color that is used in the style, or on the button if it is overridden there.
How can I accomplish this?
My current style:
<UserControl.Resources>
<DrawingImage x:Key="SomeIcon">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup>
<GeometryDrawing Brush="White" Geometry="PATH" />
<GeometryDrawing Brush="White" Geometry="OTHER_PATH" />
</DrawingGroup>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<Style x:Key="MyButton" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Button Style="{StaticResource MyButton">
<!-- I want this icon to be Blue as inherited from the style. -->
<Image Source="{StaticResource SomeIcon}"/>
</Button>
<Button Style="{StaticResource MyButton" Foreground="Red">
<!-- I want this icon be Red as overriden by the button -->
<Image Source="{StaticResource SomeIcon}"/>
</Button>
</Grid>
I only want pure XAML answers. Other XAML routes towards the same goal are also appreciated, for instance using Path instead of DrawingImage.

You could declare the icon resource as a Geometry, and have a Button Style with a Path like this:
<Window.Resources>
<Geometry x:Key="SomeIcon">M0,20 L20,0 40,20 20,40Z</Geometry>
<Style x:Key="PathButtonStyle" TargetType="Button">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate TargetType="Button">
<Path Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding Foreground}"
Data="{TemplateBinding Content}"
Stretch="None"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource PathButtonStyle}"
Content="{StaticResource SomeIcon}"/>
</Grid>

Related

WPF style present different while apply for multiply control

I have two button with the code in xaml is:
<Button Grid.Row="0" Grid.Column="2" Style="{StaticResource styleInfomationButton}" />
<Button Grid.Row="1" Grid.Column="2" Style="{StaticResource styleInfomationButton}" />
They're same style, but in runtime they were presented differently:
Here the image how the form showed:
Style applied:
<Style x:Key="styleInfomationButton" TargetType="Button">
<Setter Property="Width" Value="22" />
<Setter Property="Height" Value="22" />
<Setter Property="Content">
<Setter.Value>
<TextBlock FontWeight="ExtraBold" Foreground="White">?</TextBlock>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="20" Height="20">
<Ellipse Fill="#81A9F0" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I tried the above code, it failed at runtime with the error:
Specified element is already the logical child of another element. Disconnect it first
Then, I looked at the code again and see you are setting Content property in the style. When you tried to apply the Style to two buttons, WPF tries to set the same TextBlock element as Content for the two buttons - this can't work. In WPF, for any element, you can only have one logical parent.
Update your style to the following, to get the desired behavior:
<Style x:Key="styleInfomationButton" TargetType="{x:Type Button}">
<Setter Property="Width" Value="22" />
<Setter Property="Height" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="20" Height="20">
<Ellipse Fill="#81A9F0" />
<<TextBlock FontWeight="ExtraBold" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">?</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Very good article on Understanding the Visual Tree and Logical Tree in WPF

How to Clear Triggered Control Template

I am trying to achieve the "hint text" functionality for a TextBox in WPF. I can set the default text fine, but the problem comes when I want the control to return its appearance to a normal TextBox. Here is the trigger I have so far:
Trigger A
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox>
<TextBox.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="UniformToFill">
<VisualBrush.Visual>
<Label Content="{TemplateBinding TextBox.Tag}" Background="White"/>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
This sets the Background to a VisualBrush when the Text property is empty. What I need to do is clear this ControlTemplate when the user selects the TextBox to input text.
Here is what I tried:
Trigger B
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
These two don't work together. I tested each by changing the Background colors. If I comment out either one, they will each work. If both are uncommented, Trigger A works and B is never seen. How can I remove/overwrite Trigger A?
I know that the functionality of these templates is supposed to clear when the trigger condition is no longer met, but for example, Trigger A's setting will not go away when I enter text into the TextBox like it should. Like the Text property is still String.Empty or something.
So what am I missing?
EDIT:
Here is the whole style (there's not much more to it):
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="FormsTextBox">
<Setter Property="Width" Value="45"/>
<Setter Property="Margin" Value="3 2 3 2"/>
<Style.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox>
<TextBox.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="UniformToFill">
<VisualBrush.Visual>
<Label Content="{TemplateBinding TextBox.Tag}" Background="White" Width="45"/>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I cannot see whole template but this looks a bit overcomplicated. I assume you're trying to achieve watermark text. For hint use box standard ToolTip property, which by default will display your text in a popup when hover your TextBox but this behaviour can be disabled and ToolTip property reused. You can either create reusable Style - which I prefer - for TextBox, something like this:
<Window ...>
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Style TargetType="{x:Type TextBox}" x:Key="WatermarkTextBoxStyle">
<Setter Property="ToolTipService.IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
BorderThickness="1"
BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
<Grid>
<TextBlock Margin="5,0,0,0"
Text="{TemplateBinding ToolTip}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}"
Opacity="0.5"/>
<ScrollViewer Name="PART_ContentHost"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TextBox ToolTip="watermark text" Style="{StaticResource WatermarkTextBoxStyle}"/>
</Window>
or, if it's a one-off thing, then do you can do something like this without any Style or Template:
<Grid Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<TextBlock Margin="5,0,0,0"
Text="watermark text"
Opacity="0.5"
Visibility="{Binding ElementName=myTextBox, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox Name="myTextBox" Background="Transparent" />
</Grid>

Change property of "super/base" style wpf

I am creating a base style. I am using inheritance to implement my base style. I know how to add properties on my derived class but I don't know how to just change a property. Let me give you an example:
let say I have this base style:
<!-- SrollViewer ScrollBar Repeat Buttons (at each end) -->
<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
Name="Border"
Margin="1"
CornerRadius="2"
Background="WhiteSmoke"
BorderThickness="1">
<Image Stretch="Uniform" Source="/FilesPro;component/Images/scrollArrow.png" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center" Width="52" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" />
<TranslateTransform Y="40"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<!--
<Path
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{StaticResource GlyphBrush}"
Data="{Binding Path=Content,
RelativeSource={RelativeSource TemplatedParent}}" >
</Path>
-->
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I would like to create a new style that has the same properties as ScrollBarLineButton but with the image transfrom scaleY=1 instead of -1.
when I do:
<Style x:Key="ScrollBarLineButtonVerticalUp" BasedOn="{StaticResource ScrollBarLineButton}" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border>
<Image Stretch="Uniform" Source="/FilesPro;component/Images/scrollArrow.png" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center" Width="52" >
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" />
....
...
border no longer has its base style margin, Background color etc.. How could I inherit from the style and just change one property. I know I can copy paste but I will change this a lot and it is convenient that if I change it in one place it changes in all the other places.
You can create a DynamicResource reference to do something like this, here's an example:
<StackPanel>
<StackPanel.Resources>
<Style x:Key="ButtonStyleA" TargetType="{x:Type Button}">
<Style.Resources>
<SolidColorBrush x:Key="TextBrush" Color="Yellow" />
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="10" BorderThickness="1" BorderBrush="Red">
<ContentPresenter TextElement.Foreground="{DynamicResource TextBrush}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyleB" TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonStyleA}">
<Style.Resources>
<SolidColorBrush x:Key="TextBrush" Color="Blue" />
</Style.Resources>
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource ButtonStyleA}" Content="Lorem Ipsum" />
<Button Style="{StaticResource ButtonStyleB}" Content="Lorem Ipsum" />
</StackPanel>
In StyleB the TextBrush is overridden which causes the template to change as well since it references this resource.

Use image as WPF Button icon mask?

I'd like to know if it's possible to do the following:
create a black and white image, say of a dog
add the image to a button as a mask
change the style using (data) triggers, e.g. disabled - the dog is grey, "loading" - the dog is red, "ready" the dog is yellow, etc.
Basically I want to create button icons using pixels but be able to set the color at runtime depending on triggers. Something like this:
After 2 hours of googling here's the answer
<Window x:Class="IconTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<!-- button style -->
<Style x:Key="ToolButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Width="16" Height="16" Background="#ffbbbbbb">
<Rectangle Name="rect" Fill="Black" OpacityMask="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rect" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="rect" Property="Fill" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Width="16" Height="16" Style="{StaticResource ToolButton}">
<ImageBrush ImageSource="/test.png"/>
</Button>
</Grid>
</Window>
You can define an OpacityMask for the Button. I believe you will be able to add triggers (if you need them) to change the Background of Button.
Sample:
<Button Height="100" Width="100" Background="Green">
<Button.OpacityMask>
<DrawingBrush AlignmentX="Left" AlignmentY="Top">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#33000000">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,40,40" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="#FF000000">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="10,10,20,20">
<RectangleGeometry.Transform>
<RotateTransform Angle="45" CenterX="20" CenterY="20" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.OpacityMask>
</Button>
In my opinion, you don't need create image mask in WPF to achieve your requirement. You could simply edit the control template of the button class.
Please refer to the Ellipse button example in this page. Control Template
Then you could simply change the Fill Color of that shape using trigger. Trigger
Cheers,

Looking for a Office 2007 Style zoom slider template

Has anyone seen a good template for a Office 2007 style zoom slider?
As shown in this picture
alt text http://www.theexceladdict.com/images/zoom_controls_excel_2007_2003.jpg
Something like this would be very easy to create.
First create a button style:
<Style x:Key="ZoomIncreaseDecreaseStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Ellipse Stroke="Gray" x:Name="Ellipse">
<Ellipse.Fill>
<RadialGradientBrush ... />
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Ellipse" Property="Fill">
<RadialGradientBrush ... />
</Setter>
</Trigger>
</ControlTemplate.Trigger>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style>
Then modify the ControlTemplate in Blend (create copy), and add something like this around the <Grid>:
<DockPanel>
<RepeatButton
DockPanel.Dock="Left"
Command="{x:Stastic Slider.DecreaseLarge}"
ControlTemplate="{StaticResource ZoomIncreaseDecreaseStyle}">
<Path Data="{StaticResource MinusGeometry}" />
</RepeatButton>
<RepeatButton
DockPanel.Dock="Right"
Command="{x:Stastic Slider.IncreaseLarge}"
ControlTemplate="{StaticResource ZoomIncreaseDecreaseStyle}">
<Path Data="{StaticResource PlusGeometry}" />
</RepeatButton>
<Grid>
...
You can play with the button stroke color, gradient fill, and the + and - paths to get it the way you want it. I assume the actual Office 2007 buttons are copyrighted so you probably won't be able to copy them too closely without infringing. But this will give you something visually very similar.

Resources