I have the following XAML:
<Window x:Class="WpfTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="227" Width="391">
<Window.Resources>
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="Red" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
</Grid>
</Window>
Because of Fill="Red", obviously all buttons will have a red fill/background color. I want to use this template for several buttons, but each of them with a different fill color, known at design time. Setting the background color has no effect, so I have to change the Fill color, but I can't define the Path property again in the actual button definitions. How do I access and override this property in the XAML?
Don´t use the template directly. Assign a Style and use that.
i.e.
<Style x:Key="PentagonButton" TargetType="{x:type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use it like this:
<Grid>
<Button Content="red" Margin="12,19,0,0" Style="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Content="blue" Margin="178,19,0,0" Style="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" Background="Blue" />
</Grid>
Use TemplateBinding to change the values of your templates in the xaml of its controls:
<ControlTemplate x:Key="PentagonButton" TargetType="{x:Type Button}">
<Grid>
<Path Data="M 0,-1 L -.95,-.3 L -.58,.8 L .58,.8 L .95,-.3 Z" Stroke="Black" Stretch="Uniform" Fill="{TemplateBinding Background}" />
<Viewbox>
<ContentPresenter Margin="20" />
</Viewbox>
</Grid>
</ControlTemplate>
Your button:
<Button Background="Red" Content="red" Margin="12,19,0,0" Template="{StaticResource PentagonButton}" HorizontalAlignment="Left" Width="166" Height="151" VerticalAlignment="Top" />
<Button Background="Blue" Content="blue" Margin="178,19,0,0" Template="{StaticResource PentagonButton}" Height="151" VerticalAlignment="Top" HorizontalAlignment="Left" Width="173" />
Related
I am putting together a very simple WPF Window to demonstrate how the style the end user has asked for looks. As there are a number of repeated button type objects I wanted to make them have a style in the window that can then be transferred to the real application once adjustments have been made.
The problem I face is that the user wishes to have images for their buttons, when I set the background image within the button itself then it shows perfectly and behaves as I want (change of image on mouseover etc). When I move that formatting into the Style everything till works but the background images don't show. I am sure I am missing something very simple but I cannot see it.
The code I have generated is below :-
<Window x:Class="SkinningDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SkinnigDemo"
mc:Ignorable="d"
Title="DemoWindow" Height="450" Width="800">
<Window.Resources>
<Style x:Key="MainButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF266C38"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Images/Button2.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#220A88"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="Home">
<Grid.Background>
<SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
</Grid.Background>
<Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
<TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
<Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
</Button>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
<Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
<TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
<Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
<Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>
</Grid>
</Window>
As I say the background images do not display on the screen, but if I remove the style and set it all locally with exactly the same values it works perfectly :-
<Button x:Name="Button1" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
<Button.Background>
<ImageBrush ImageSource="/Images/Button1.png"/>
</Button.Background>
</Button>
Thanks in anticipation of the help.
Playing around with your nicely looking XAML I noticed that you need to say "bind" the Background brush to the root element of your control template which is a border, to get background images displayed.
If you just insert Background="{TemplateBinding Background}" under the line <Border Name="border" it'll basically work out fine., like:
<Border Name="border"
Background="{TemplateBinding Background}"
BorderThickness="0">
i have three toggle buttons which use a singe style resource on wpf, now i cant set their content, content is declared more than once error, each toggle button has a different content.
Each toggle button uses an image as background also.
<UserControl.Resources>
<Style x:Key="Chromeless" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="197" Height="60">
<ContentPresenter TextElement.FontFamily="{TemplateBinding TextElement.FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="page1Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_1.png" Height="60" Width="197" />
<Image x:Key="page1" Source="/graph_engine;Component/cucaracha/LD3/button_1_pressed.png" Height="60" Width="197" />
<Image x:Key="page2Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_2.png" Height="60" Width="197" />
<Image x:Key="page2" Source="/graph_engine;Component/cucaracha/LD3/button_2_pressed.png" Height="60" Width="197" />
<Image x:Key="page3Pressed" Source="/graph_engine;Component/cucaracha/LD3/button_3.png" Height="60" Width="197" />
<Image x:Key="page3" Source="/graph_engine;Component/cucaracha/LD3/button_3_pressed.png" Height="60" Width="197" />
</UserControl.Resources>
<Viewbox Stretch="Fill" StretchDirection="Both">
<Grid Height="60" Name="grid1" Width="591" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
<ColumnDefinition Width="197" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource Chromeless}" Name="page1" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page1_Checked" Unchecked="page1_Unchecked">
<DynamicResource ResourceKey="page1"/>
</ToggleButton>
<ToggleButton Grid.Column="1" Style="{StaticResource Chromeless}" Name="page2" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Unchecked="page2_Unchecked" Checked="page2_Checked">
<DynamicResource ResourceKey="page2"/>
</ToggleButton>
<ToggleButton Grid.Column="2" Style="{StaticResource Chromeless}" Name="page3" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Foreground="{x:Null}" Checked="page3_Checked" Unchecked="page3_Unchecked">
<DynamicResource ResourceKey="page3"/>
</ToggleButton>
</Grid>
</Viewbox>
Do you mean you can't change the image when you pressed down the toggle button? You only set a image to the content of toggle button. You can use Visual State Manager to change the background like this
If you just want to set the image and failed. Please check the image path.
So I have a circular button I have created in wpf like so:
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
But the button it displays is:
Why has the red X not appeared in the center of my button? and is it possible to change my xaml such that the red X will appear.
(ps. the grey background is because of my button style in my resources)
It's because there's nothing in your Template to display that Content. For that you need to use ContentPresenter
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
you'll also need to add TargetType="{x:Type Button}" to ControlTemplate
I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>
Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.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>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>
Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
I'm having this annoying problem with WPF that I can't get my head around.
What I'm trying to create, is a very basic implementation of a drawing program (it's a school assignment) with movable tool windows, like in Photoshop.
I've managed to figure out that I can use this element "Thumb" to implement simple Drag functionality. Since the Thumb element itself is not visible, and the object that I'm using as a container (a DockPanel) does not have a DragDelta property, I simply created a ControlTemplate and attached it to the Thumb, so now I have a draggable color picker that works okay. So far so good.
But, problems arise when I want to create additional ControlTemplates, to use for other Thumb-elements that I plan to use (I get the error: The property 'VisualTree' is set more than once.).
This is what I want help with. I have pasted my whole Window.Resources-tag here so you can see what's going on.
<Window.Resources>
<Style x:Key="toolBoxBtn" TargetType="Button">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="60" />
<Setter Property="Margin" Value="5" />
<Setter Property="DockPanel.Dock" Value="Top" />
</Style>
<Style x:Key="style1" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<DockPanel Background="#e6e6e6" HorizontalAlignment="Left" Margin="0" Height="auto" Width="auto" Canvas.Left="640" Canvas.Top="8">
<Label VerticalAlignment="Top" DockPanel.Dock="Top" Background="#282828" Foreground="white" Content="Colors" HorizontalAlignment="Stretch" Width="auto" Height="auto" />
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="7" VerticalAlignment="Center">
<Rectangle DockPanel.Dock="top" Name="red" Fill="Red" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
<Rectangle DockPanel.Dock="top" Name="blue" Fill="Blue" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="green" Fill="GreenYellow" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="customColorSlot1" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
<Rectangle DockPanel.Dock="top" Name="customColorSlot2" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
<Rectangle DockPanel.Dock="top" Name="customColorSlot3" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
</StackPanel>
<GroupBox Header="Selected Color">
<Rectangle Name="currentColor" Fill="White" Height="40" Width="40" Stroke="Black" MouseDown="test"/>
</GroupBox>
</StackPanel>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="fillTool" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
What could be the problem here?
ControlTemplate can only contain one child. Try and change it to a Canvas instead
<Style x:Key="fillTool" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Canvas>
<Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
<Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>