I am reading a book on WPF as I'm trying to learn it.
There is an example of a button below. This makes sense apart from one line, below.
<ContentControl Margin=”2” Content=”{TemplateBinding Content}”/>
The book says the below,
Figure 14.9 shows what two Buttons look like with this new control template applied.
One Button has simple “OK” text content, and the other has an Image. In both cases, the content is reflected in the new visuals as expected.
However I can't see how to get an image to show on the button? I have drawn a triangle below that I want to be in the centre of the button but I can't get it to appear.
My drawing
<Polygon x:Key="playTriangle" Stroke="Black" Fill="Black">
<Polygon.Points>
<Point X="10" Y="40"/>
<Point X="40" Y="25"/>
<Point X="10" Y="10"/>
</Polygon.Points>
</Polygon>
Book Example
<ControlTemplate x:Key="buttonTemplatePlay" TargetType="{x:Type RibbonButton}">
<Grid Height="60" Width ="60">
<Ellipse x:Name="outerCircle">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Blue"/>
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Margin="5">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Viewbox>
<ContentControl Margin="5" Content="{TemplateBinding Content}"/>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="outerCircle" Property="Fill" Value="Green"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX=".9" ScaleY=".9"/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value=".5,.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You should set the polygon (or any other content for that matter) as the button's content:
<RibbonButton>
<RibbonButton.Content>
<Polygon Stroke="Black" Fill="Black">
<Polygon.Points>
<Point X="10" Y="40"/>
<Point X="40" Y="25"/>
<Point X="10" Y="10"/>
</Polygon.Points>
</Polygon>
</RibbonButton.Content>
</RibbonButton>
Note that I removed the x:Key="playTriangle" attribute
If the polygon is defined in a resource dictionary, you should reference it using StaticResourceExtension instead:
<RibbonButton Content={StaticResource ResourceKey=playTriangle}" />
One way or another, the key point is that you should use RibbonButton.Content property to set content of the button.
Related
I have a Style defined for my DataGridCell
<Style x:Key="MYDGCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template" Value="{DynamicResource MYDGCellControlTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsReadOnly}" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="0.3" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid x:Name="CellGrid">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Transparent" />
<GradientStop Offset="0.8" Color="Transparent" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
During Runtime I add additional Triggers for specific Columns like this in my Code
Style Sty = null;
if (Sty == null)
{
Sty = new Style(typeof(DataGridCell));
Sty.BasedOn = (Style)Application.Current.TryFindResource("MYDGCellStyle");
}
DataTrigger t = new DataTrigger();
t.Binding = new Binding("ProductionStatus");
t.Value = "I";
Setter s = new Setter();
s.Property = DataGridCell.BackgroundProperty;
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
t.Setters.Add(s);
Sty.Triggers.Add(t);
DGC.CellStyle = Sty;
But if I focus one of the Cells where a DataTrigger I added in my Code is triggerd the Color isn't displayed correctly.
How can I display the fuchsia Sides in front of the Gold Background?
Grey Cell Focused:
Gold Cell Focused:
UPDATE
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid>
<Grid Grid.ZIndex="99" x:Name="CellGrid"/>
<Border Grid.ZIndex="98" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.1" Color="#00FF00FF" />
<GradientStop Offset="0.9" Color="#00FF00FF" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Your problem might be, that you apply a golden color brush above the fuchsia edges, so they get tinted by 50% of gold.
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
Additionally you should be aware that using Transparent in XAML means "white with no opacity", so if you want to fade out funchsia you should not fade to transparent white, but to transparent fuchsia instead.
White: #FFFFFFFF
Transparent: #00FFFFFF
Fuchsia opaque: #FFFF00FF
Fuchsia transparent: #00FF00FF
To enforce the z-order you could use an additional container around the item given and apply the status here "during runtime". Anyway this will not be an MVVM approach.
The better way might be to define a custom template-parameter (bool IsSpecificColumn) in your XAML, which will be set in your code "during runtime". Using MultiTrigger you can also define a third state for gold+fuchsia.
If you have to combine even more states you should let WPF do the job and use the approach with the boxed containers mentioned above together with template-parameters.
Try creating a new "IsFocused" trigger in your new style(I ProductionStatus)like this:
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Gold" />
<GradientStop Offset="0.8" Color="Gold" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
I know you are doing it on code behind, but I think you'll understand me(easyer to copy-paste).
I am wondering if there is a way to customize style of windows forms application built in visual studio using c#. I have searched through the internet and couldn't find simple solution for overriding default view of the layout. Is there a way to change layout with cascading style sheets? Thanks in advance.
Windows Forms apps do not support CSS, it is used when developing websites.
In Winforms you are limited to the styles which are listed in Properties window in GUI editor, unless you'd like to override OnPaint event and do custom drawing.
Some examples are:
http://www.codeproject.com/Articles/8056/Creating-Custom-Shaped-Windows-Forms-in-NET
http://geekswithblogs.net/kobush/archive/2005/07/04/CustomBorderForms.aspx
https://customerborderform.codeplex.com/
If you are looking for more customizable solution, you can turn to WPF.
you can find answer here..
or
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main()
{
// Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1());
}
}
You can use a static resource such as this.
Inside button tag Style="{DynamicResource sty3dBtn}"
(You can set margins here too but sometimes thats best to do for each button depending on your own needs)
You can use xml styling. The button is set to have a dropshadow and gradient and lights up when pressed etc. As I wanted to reuse these effects with similar buttons I created a reusable style in my Application.xaml enclosed in Application - Application.Resources tags
and referenced its x:Key in style attribute of the button I wanted the effect on. You can do this on each page you choose but I think it can be better to place in a common area so its reusable throughout the scope of the class you place it in. Note the Target Type must match.
I'll post snippet of the xml style it turns a regular button into one with 3d effect. You can reference this as many times as you need. It cuts down on inline code clutter too so makes the page more readable in my opinion.
<Style x:Key="sty3dBtn" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground" Opacity="1" RadiusX="9" RadiusY="9"
Fill="{TemplateBinding Background}" StrokeThickness="0.35"
RenderTransformOrigin="0.5,0.5">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="YellowGreen" Offset="0" />
<GradientStop Color="Green" Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top"
RadiusX="6" RadiusY="6" Opacity="1" Stroke="Transparent" Height="15px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Brown">
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform" TargetName="GelBackground">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" TargetName="GelBackground" Value="LightGray">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Contains animation code-->
<Setter Property="Background" Value="Green"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="55"/>
<Setter Property="Height" Value="30"/>
</Style>
I have this style for a button:
<Style x:Key="ButtonStyle1" TargetType="{x:Type local:ButtonExt}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonExt}">
<Grid Name="grid" Margin="0,0,0,0">
<Rectangle Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="1" Color="{DynamicResource button_background_gradient1}" />
<GradientStop Offset="0" Color="#FF004F96" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Effect>
<DropShadowEffect BlurRadius="3" Opacity="0.4" ShadowDepth="6" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Width="0.7" Margin="0,0,43,1" HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="#FF434343">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="0" Color="#FFF7F7F7" />
<GradientStop Offset="1" Color="#FFD6D6D6" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsDefaulted" Value="True" />
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="grid" Property="Margin" Value="2,2,-1,-1" />
<Setter TargetName="rectangle" Property="Effect" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True" />
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and another style based on this style:
<Style x:Key="ButtonStyle2" BasedOn="{StaticResource ButtonStyle1}">
<Setter Property="Rectangle.Fill">
<Setter.Value>
In the first style, I have two rectangles. In the second style, which is based on style 1, I would like to change the property of just one rectangle (which I named it "rectangle"). How can I do that?
Expose a property for the rectangle's fill in the ButtonEx class.
In the template, use {TemplateBinding} to bind the Fill to this new property.
In the derived style, set a new value to this property.
I tried using the ProgressBar style from the silverlight toolkit TwilightBlue theme in WPF. It doesn't throw any errors but the progress bar doesn't fill. The style is as follows.
<!-- ProgressBar -->
<Style TargetType="ProgressBar">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB4B4B4" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0.75,0.75,1.5,1.5" />
<Setter Property="Maximum" Value="100" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid x:Name="Root">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Determinate" />
<vsm:VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateGradientFill" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.Transform).(TransformGroup.Children)[0].X">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:.5" Value="20" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border CornerRadius="4" x:Name="White" BorderBrush="#FFFFFFFF" BorderThickness="1.2" Grid.RowSpan="2">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.35" ScaleY="1.35" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border x:Name="ProgressBarTrack" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1.2,1.2,1.2,1.2" CornerRadius="4,4,4,4" Grid.RowSpan="2" Opacity="0.65" />
<Grid x:Name="ProgressBarRootGrid" Grid.RowSpan="2">
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarRootGradient" Canvas.ZIndex="1" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="4" RadiusY="4" Opacity="0.65">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.7,1.263" StartPoint="0.699999988079071,0">
<GradientStop Color="{StaticResource PrimaryColor}" Offset="0.312" />
<GradientStop Color="{StaticResource SecondaryColor}" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateSolidFill" Opacity="1" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Foreground}" Stroke="#FF448DCA" StrokeThickness="0" RadiusX="4" RadiusY="4" />
<Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="IndeterminateGradientFill" Opacity="0.7" StrokeThickness="1" RadiusX="4" RadiusY="4">
<Rectangle.Fill>
<LinearGradientBrush MappingMode="Absolute" SpreadMethod="Repeat" EndPoint="0,1" StartPoint="20,1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TranslateTransform X="0" />
<SkewTransform AngleX="-30" />
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#00FFFFFF" Offset=".25" />
<GradientStop Color="#FFFFFFFF" Offset="0.85" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid Margin="1" x:Name="DeterminateRoot">
<Rectangle HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}" x:Name="ProgressBarIndicator" StrokeThickness="0.5" RadiusX="4" RadiusY="4" Fill="{StaticResource PrimaryBrush}" />
</Grid>
</Grid>
<Border BorderBrush="#7FFFFFFF" BorderThickness="1" CornerRadius="3.5" x:Name="InnerBorder" Margin="1" Grid.RowSpan="2" />
<Border CornerRadius="3.5" x:Name="Shadow" Margin="2" Opacity="0.2" Grid.RowSpan="2">
<Border.OpacityMask>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="-0.5" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00FFFFFF" Offset="0.3" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.OpacityMask>
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.75" ScaleY="2.25" />
<TranslateTransform Y="0.65" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000" Offset="0.55" />
<GradientStop Color="#4C000000" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border Margin="1" CornerRadius="4,4,40,40" x:Name="Highlight" Opacity="0.8" RenderTransformOrigin="0.5,1">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.25" ScaleY="2" />
<TranslateTransform Y="-0.6" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#BFFFFFFF" Offset="0" />
<GradientStop Color="#4CFFFFFF" Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Are the WPF and Silverlight progressbars different? Why doesn't this work?
There are two issues I see here:
1. Your brush for the Foreground may not be defined. When you run this under the debugger, look for binding errors in the Output window.
Try this changing
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
to
<Setter Property="Foreground" Value="Black" />
If other parts are not showing up, you may have other undefined brushes.
2. Your names may not match the PART names expected in WPF. Here is a custom progress bar style for WPF that may be a better starting point:
<Style x:Key="ProgressBar-sterling" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Border Background="#00E6E6E6" BorderBrush="#FFA6A6A6" BorderThickness="1" SnapsToDevicePixels="True" >
<DockPanel x:Name="PART_Track" LastChildFill="false">
<Border x:Name="PART_Indicator" HorizontalAlignment="Left" SnapsToDevicePixels="True">
<Grid Margin="1">
<Rectangle Fill="#FF737373" SnapsToDevicePixels="True" />
<Rectangle x:Name="Overlay" IsHitTestVisible="False" Opacity="0.4" SnapsToDevicePixels="True">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="1"/>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.124"/>
<GradientStop Color="Transparent" Offset="0.72"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
One thing I would do it to create a sample Silverlight application and very any SL styles you import work in SL before trying to port them to WPF. Also, Expression Blend provides example styles in both the Simple and SketchFlow styles and can make creating custom styles from existing controls much easier.
Just wondering if anyone knows how to change the look of the button on a wpf combobox?
In case you are wondering I just want to change the shape of it and the background.
Thanks.
You can easily modify the ControlTemplate or style of controls using Expression Blend.
Here is one example which will use the Simple Style for the ComboBox and i have modified the Toggle button Color to red.
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<!-- LightBrush is used for content areas such as Menu, Tab Control background -->
<LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>
<!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</LinearGradientBrush>
<!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>
<!-- Disabled Brushes are used for the Disabled look of each control -->
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>
<!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>
<!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
<LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#777" Offset="0.0"/>
<GradientStop Color="#000" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>
<!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<Style x:Key="test" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
<ToggleButton Grid.Column="2" Template="{DynamicResource ToggleButtonControlTemplate1}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
<!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>
<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<!-- This forces the DropDown to have a minimum size if it is empty -->
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource WindowBackgroundBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Path Grid.Column="1" HorizontalAlignment="Center" x:Name="Arrow" VerticalAlignment="Center" Fill="Red" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Rectangle"/>
<Setter Property="Stroke" Value="{DynamicResource DisabledBorderBrush}" TargetName="Rectangle"/>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
<Setter Property="Fill" Value="{DynamicResource DisabledForegroundBrush}" TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
To change the Shape or background of the Toggle Button in the example you have to modify the ControlsTemplate "ToggleButtonControlTemplate1".
Use control templates for that.