How to set another control style when they are created in ItemsControl - wpf

The following shows two buttons. When the mouse is over the second button, I would like to change the firsts borderbrush to white.
<ItemsControl ItemsSource="{Binding Path=ModuleCollection}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0">
<Button Content="{Binding ModuleName}" Template="{StaticResource navModuleButton}"/>
<Button Template="{StaticResource CloseButtonStyle}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I believe could possibly be done with a datatrigger on the first button as follows, but in order to do that I need to name the second button, not sure how to dynamically name.
<DataTrigger Binding="{Binding ElementName=closeBtn1, Path=IsMouseOver}" Value="True">
<Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/>
</DataTrigger>
How to do this?
[EDIT]
This is the template for the first button where you'll see btnBorder is the border I would like to change the color of.
<ControlTemplate x:Key="navModuleButton" TargetType="{x:Type Button}">
<Border x:Name="btnBorder" RenderTransformOrigin="0.5,0.5" BorderThickness="1,1,1,1" CornerRadius="0,0,7,0">
<Grid x:Name="Grid" RenderTransformOrigin="0.5,0.5">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="Border1" RenderTransformOrigin="0.5,0.5" BorderThickness="0.5,0.5,0.5,0.5" CornerRadius="0,0,7,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<RotateTransform Angle="90" />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
</Border.Background>
</Border>
<DockPanel Name="myContentPresenterDockPanel">
<ContentPresenter x:Name="myContentPresenter" Margin="10,0,21,0"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
TextBlock.Foreground="White" />
</DockPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property ="Opacity" Value="0.30" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Border1">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="90"/>
<TranslateTransform X="0" Y="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#837C7C7C" Offset="0"/>
<GradientStop Color="#83343434" Offset="0.99496336996337187"/>
<GradientStop Color="#83343434" Offset="0.523844744998591"/>
<GradientStop Color="#837C7C7C" Offset="0.48045224006762494"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Cursor" Value="Hand" TargetName="Grid"/>
<Setter Property="BitmapEffect" TargetName="Border1">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue"/>
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

You can use the SourceName property in a trigger, like this:
<DataTemplate>
<Grid Margin="0">
<Button x:Name="btnModule"
Content="{Binding ModuleName}"
Template="{StaticResource navModuleButton}"/>
<Button x:Name="btnClose"
Template="{StaticResource CloseButtonStyle}"/>
</Grid>
<DataTemplate.Triggers>
<Trigger SourceName="btnClose" Property="IsMouseOver">
<Setter TargetName="btnModule" Property="BorderBrush" Value="White"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Don't worry about the names, WPF takes care of that, since the DataTemplate has it's own Name Scope
Edit: your button ControlTemplate is wrong.
A ControlTemplate should be defined in such a way that the properties of the Visual elements inside of it are "tied" to the properties of the Control the template is applied to.
In other words, your btnBorder should depend on the properties of the "parent templated item" the Control to which template is applied, in this case, btnModule.
For that purpose, a common approach is to use a TemplateBinding in the ControlTemplate, like this:
<Border x:Name="btnBorder"
RenderTransformOrigin="0.5,0.5"
BorderThickness="1,1,1,1"
CornerRadius="0,0,7,0"
BorderBrush="{TemplateBinding BorderBrush}"> <!-- See the TemplateBinding here -->
this will bind the btnBorder.BorderBrush property to the parent's BorderBrush (in this case btnModule.BorderBrush)

Related

ToolTip appears Instantly in WPF. Does not trigger Initial delay

I have two buttons in Main.Xaml. I declare ToolTip for each of them. They have a very small gap which is barely visible with open eyes but still they have gap which you you can see by their Margin.
<Button
Style="{StaticResource RoundCorner}"
x:Name="button1" Width="71" HorizontalAlignment="Left" Margin="165,14,0,0" Height="24"
VerticalAlignment="Top" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True"
>
<Button.Content >
<TextBlock FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" Margin="0,-2,0,0" >
Settings
</TextBlock>
</Button.Content>
<Button.ToolTip >
<ToolTip Style="{StaticResource ToolTipDefaults}" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display"
>
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="12" TextOptions.TextFormattingMode="Display" >
Settings
</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
`enter code here`<Button
Style="{StaticResource RoundCorner}"
x:Name="button2" Width="71" HorizontalAlignment="Left" Margin="237,14,0,0" Height="24"
VerticalAlignment="Top" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True"
>
<Button.Content >
<TextBlock FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" Margin="0,-2,0,0" >
Settings
</TextBlock>
</Button.Content>
<Button.ToolTip >
<ToolTip Style="{StaticResource ToolTipDefaults}" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display"
>
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="12" TextOptions.TextFormattingMode="Display" >
Settings
</TextBlock>
</StackPanel>
</ToolTip>
</Button.ToolTip>
</Button>
I have created two control template one is for button which is consider as "RoundCorner" and declare as StaticResource of buttons in Main.XAMl. And another is for ToolTip.
Here is the Code for RoundCorner Controltemplate(Button) --
<Style x:Key="RoundCorner" TargetType="{x:Type Button}" x:Name="RoundCornerButton" >
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Foreground" Value="#bababa" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid" >
<Border x:Name="border" CornerRadius="1" BorderThickness="0" >
<Border.Background>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5"
ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#282828"/>
<GradientStop Offset="0.3" Color="#282828"/>
</RadialGradientBrush>
</Border.Background>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#202020"/>
<Setter Property="Foreground" Value="WhiteSmoke" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#161616" Offset="1"/>
<GradientStop Color="#161616" Offset="0.3"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the Control template code for Tooltip--
<Style x:Key="ToolTipDefaults" x:Name="NewTooltip"
TargetType="{x:Type ToolTip}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="HasDropShadow"
Value="True" />
<Setter Property="ToolTipService.Placement"
Value="MousePoint" />
<Setter Property="ToolTipService.VerticalOffset"
Value="5" />
<Setter Property="ToolTipService.HorizontalOffset"
Value="-10" />
<Setter Property="Foreground"
Value="#606060"/>
<Setter Property="ToolTipService.InitialShowDelay"
Value="1000" />
<Setter Property="ToolTipService.BetweenShowDelay"
Value="0" />
<Setter Property="ToolTipService.ShowDuration"
Value="6000" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" Margin="10" >
<Border x:Name="Bordermini" HorizontalAlignment="Right"
BorderThickness="0.5"
Width="{TemplateBinding Width}"
Height="15">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="White"
Offset="0.0" />
<GradientStop Color="White"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Gainsboro" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect Opacity="0.8" BlurRadius="5" Direction="-82" ShadowDepth="3.8" Color="#282828" >
</DropShadowEffect>
</Border.Effect>
<ContentPresenter Margin="1.5,0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Border>
<Border x:Name="Border" HorizontalAlignment="Right"
BorderThickness="0.5"
Width="{TemplateBinding Width}"
Height="19">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffffff"
Offset="0.0" />
<GradientStop Color="#ffffff"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<ContentPresenter Margin="4,0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border"
Property="CornerRadius"
Value="0" />
<Setter TargetName="Border"
Property="SnapsToDevicePixels"
Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So, How I re trigger the initial delay as soon as I quickly move the mouse cursor from one button to another? Is there any need to use the "Datatrigger" or "DataBinding" to overcome this issue?
1:Open the Nuget of your package,search and add YshXaf.DevExpress.Mvvm_yesfree and YshXaf.DevExpress.Xpf.Core_yesfree.
2:Add below class and using DevExpress.Mvvm.UI.Interactivity for it.
public class ToolTipBehavior : Behavior<FrameworkElement>
{
private object _popupControlService;
private PropertyInfo _toolTipTimerProperty;
protected override void OnAttached()
{
base.OnAttached();
var popControlServiceProperty = typeof(FrameworkElement).GetProperty("PopupControlService", BindingFlags.Static | BindingFlags.NonPublic);
_popupControlService = popControlServiceProperty.GetValue(this.AssociatedObject);
_toolTipTimerProperty = _popupControlService.GetType().GetProperty("ToolTipTimer", BindingFlags.Instance | BindingFlags.NonPublic);
this.AssociatedObject.ToolTipClosing += AssociatedObject_ToolTipClosing;
}
void AssociatedObject_ToolTipClosing(object sender, ToolTipEventArgs e)
{
_toolTipTimerProperty.SetValue(_popupControlService, new DispatcherTimer());
}
protected override void OnDetaching()
{
base.OnDetaching();
}
}
3: Add xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" in the Xaml.Then use the ToolTipBeahvior in your RoundCorner.
<Setter Property="dxmvvm:Interaction.BehaviorsTemplate">
<Setter.Value>
<DataTemplate>
<ContentControl>
<local:ToolTipBehavior/>
</ContentControl>
</DataTemplate>
</Setter.Value>
</Setter>
Here is the result picture:

apply an existed style for ListBoxItem template

I'm trying to give a style to items in a ListBox, I made this style previously for ListViewItem which about TextBlock, Image and a Border which changes its color when an item event raised (IsSelected, IsMouseOver, IsSelectionActive), Now I want to keep this style and apply it to any item added to a ListBox
<Style x:Key="ListBoxPCInfoStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68">
<Image x:Name="Img" Width="56" Height="56" Margin="6,0,6,18" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path= ActualHeight}"/>
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68" CornerRadius="2.5"/>
<TextBlock HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{TemplateBinding Name}" VerticalAlignment="Bottom" Width="Auto" Height="17" TextAlignment="Center" Margin="4,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#33C1DEFF" Offset="0"/>
<GradientStop Color="#41A5CDFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7DA2CE"/>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#97C1DEFF" Offset="0"/>
<GradientStop Color="#A7A5CDFF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="border" Value="#FFB4B4B4"/>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FE5E5E5" Offset="0"/>
<GradientStop Color="#B2CCCCCC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I have this ListBox
<ListBox x:Name="ListHosts" Background="{x:Null}" BorderBrush="{x:Null}">
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="50" CornerRadius="2.5"/>
<Image x:Name="Img" Source="BtnImg/Computer.png" Stretch="None" Margin="3,0,10,0"/>
<TextBlock x:Name="PCName" Margin="0,7" TextWrapping="Wrap" Height="16" HorizontalAlignment="Left"><Run Text="{Binding Name}"/></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox>
I feel like I'm missing something simple here... can someone help me spot it?
2 Options:
Either remove the x:Key from the style:
<Style TargetType="{x:Type ListBoxItem}">
<!-- ... -->
this will make the style apply to all ListBoxItems in the resource scope.
or
Explicitly reference the style in your ListBox:
<ListBox ItemContainerStyle="{StaticResource ListBoxPCInfoStyle}">
<!-- ... -->
-------------------------------------------------------------------------------------------
Anyways, all your XAML is wrong. You're defining the ListBoxItem.Template like this:
<Grid HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68">
<Image x:Name="Img" Width="56" Height="56" Margin="6,0,6,18" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path= ActualHeight}"/>
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68" CornerRadius="2.5"/>
<TextBlock HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="{TemplateBinding Name}" VerticalAlignment="Bottom" Width="Auto" Height="17" TextAlignment="Center" Margin="4,0"/>
</Grid>
Which leaves no chance for custom DataTemplates to be introduced anywhere. You need to leave a ContentPresenter somewhere, so that WPF has a chance to put DataTemplated content inside that.
And the TextBlock makes no sense. You're binding against the ListBoxItem.Name property, which is completely irrelevant and makes no sense to be shown in the UI, and which you have no control over, anyways.
Data does not belong into ControlTemplates, only DataTemplates.
Change your template like so:
<Grid HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68">
<Image x:Name="Img" Width="56" Height="56" Margin="6,0,6,18" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path= ActualHeight}"/>
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Left" Height="74" VerticalAlignment="Top" Width="68" CornerRadius="2.5"/>
<ContentPresenter ContentSource="Content"/>
</Grid>
And the ListBox XAML is also wrong:
By doing this:
<ListBox ...>
<DataTemplate>
<!-- ... -->
</DataTemplate>
</ListBox>
You're putting the DataTemplate as an item inside the ListBox, which is not what you want.
You need to specifically assign the DataTemplate as the ItemTemplate for the ListBox:
<ListBox ...>
<ListBox.ItemTemplate>
<DataTemplate>
<!-- ... -->
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And why is the Image.Source bound to a property of type double? That makes no sense.
Either put a specific resource there:
<Image Source="/resources/somepic.png"/>
or
if you want to dynamically change the image dependending on certain data, then that belongs into the DataTemplate, not the ControlTemplate.
-------------------------------------------------------------------------------------------
I suggest you read up the following material:
MSDN: WPF Content Model
MSDN: WPF Controls Content Model
Dr. WPF: ItemsControls A to Z

WPF glowing button

I have a WPF application. Where I have a toggle button that has a glass effect. When the button is checked the button fills blue which in the code below has been commented out. I have created a rectangle with a glow effect and would like this to be activated when the IsChecked = true. At the moment it doesn't appear to be doing anything.
<Style x:Key="ToggleButtonTemplate" TargetType="ToggleButton">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5,5,5,5"/>
<Setter Property="IsChecked" Value="{Binding SecurityList[0].Run}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="ButtonBorder"
CornerRadius="15,15,15,15"
BorderThickness="3,3,3,3"
Background="#AA000000"
BorderBrush="#99FFFFFF"
RenderTransformOrigin="0.5,0.5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1.7*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="23,23,0,0">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#08FFFFFF" Offset="0"/>
<GradientStop Color="#88FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
Grid.RowSpan="2"
HorizontalAlignment="Center"/>
<Rectangle x:Name="recGlow" HorizontalAlignment="Left" Stroke="Black"
VerticalAlignment="Top" Opacity="0">
<Rectangle.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.248" ScaleX="1.276"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform Y="0.317" X="-0.007"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF088CE8" Offset="0"/>
<GradientStop Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="GBP / USD" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold"/>
<Image Grid.Row="1" Grid.Column="0" Source="/Resources/GBP.ico"/>
<Image Grid.Row="1" Grid.Column="1" Source="/Resources/USD.ico"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<!--<Setter TargetName="ButtonBorder" Property="Background" Value="Blue"/>-->
<Setter TargetName="recGlow" Property="Opacity" Value="0.8"/>
<Setter Property="RenderTransform" TargetName="ButtonBorder">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Rectangle is too small to be observed.
Set HorizontalAlignment and VerticalAlignment to Stretch and set Grid.ColumnSpan to 2 on rectangle -
<Rectangle x:Name="recGlow" HorizontalAlignment="Stretch" Stroke="Black"
VerticalAlignment="Stretch" Opacity="0" Grid.ColumnSpan="2">

Removing gloss from progressbar?

So I was suggested to use WPF forms to make a custom UI for my applications. The first thing I wanted to try was to change the look of the progress bar. The only thing holding me back from it's new look atis the glossy effect over the top of it. I want the progrss bar to be made of mostly solid colours. Is there anyway to remove the glossy part of the progress bar?
Shown here:
Thanks.
Nasreddine answers is very good but if you want something simpler you can use the following
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can achieve any style you want by editing the ControlTemplate of the progress bar. Here's an example :
Disclaimer: I'm not a designer.
<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#FF000000" Offset="0.4"/>
<GradientStop Color="#FF000000" Offset="0.6"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="#01D328"/>
<Setter Property="Background" Value="#C7C7C7"/>
<Setter Property="BorderBrush" Value="#B2B2B2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="Background" SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
<Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
<Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
<Rectangle x:Name="PART_Track" Margin="1"/>
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
<Grid x:Name="Foreground">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
<Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
<Rectangle.OpacityMask>
<MultiBinding>
<MultiBinding.Converter>
<Themes:ProgressBarHighlightConverter/>
</MultiBinding.Converter>
<Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Binding ElementName="Background" Path="ActualWidth"/>
<Binding ElementName="Background" Path="ActualHeight"/>
</MultiBinding>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</Decorator>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="Background">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Track">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Indicator">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="Foreground">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="true">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsIndeterminate" Value="false">
<Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apply this style to your ProgressBar and you're good to go :
<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />
Here's the end result :

WPF: LinearGradientBrush with Alpha not works in a Popup control?

I want to create a custom WPF dropdown menu, so I created a User control which contains a ToggleButton and a Popup control. The popup appears when I click on the button.
Now I want to add a mouse hover effect on the menu items in the popup: but the LinearGradientBrush is not working with alpha channels:
<UserControl.Resources>
...
<Style x:Key="SubMenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Rectangle x:Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
Fill="{TemplateBinding Background}" />
<StackPanel>
<TextBlock x:Name="text" Text="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" />
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="#30000000"/>
<Setter Property="Fill" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="#10000000" Offset="0"/>
<GradientStop Color="#10FFFFFF" Offset="1"/>
<!-- Not works... -->
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" TargetName="text" Value="#FF9A9A9A"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Controls:ToggleImageButton Style="{DynamicResource ArrowMenuStyle}" x:Name="imageButton" Height="21" />
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=imageButton}" Placement="Bottom" StaysOpen="False" IsOpen="{Binding ElementName=imageButton, Path=IsChecked}">
<ItemsControl ItemsSource="{Binding MenuCommands}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Name}" Command="{Binding Command}" Background="{Binding ElementName=popupMenuControl, Path=MenuBackground}" Foreground="{Binding ElementName=popupMenuControl, Path=MenuForeground}" Click="MenuItem_Click" Style="{StaticResource SubMenuItemStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Popup>
</Grid>
When I set the GradientBrush to this, everything works fine:
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
But it seems the Alpha channel breaks the whole thing, and what I see is a black rectangle.
...Any idea?
If I put the MenuItems inside a Menu container, the Menu overrides my styles...
Thanks in advance!
have you set AllowsTransparency to true?

Resources