I want to change size of button from 70 till 90 when mouse is over:
<Style TargetType="Button"
x:Key="RadialButton">
<Setter Property="Width"
Value="70"></Setter>
<Setter Property="Height"
Value="85"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
Storyboard.TargetName="ExtEllipse">
<EasingDoubleKeyFrame KeyTime="0:0:1"
Value="90" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="15"></RowDefinition>
</Grid.RowDefinitions>
<Ellipse Width="70"
Height="70"
Stroke="Gray"
Grid.Row="0"
Name="ExtEllipse"
Fill="{x:Null}" />
<Ellipse Width="50"
Height="50"
Stroke="Gray"
Grid.Row="0"></Ellipse>
<TextBlock Grid.Row="1"
FontSize="13"
FontWeight="Bold"
TextAlignment="Center"
Foreground="Green">
<ContentPresenter RecognizesAccessKey="True"
Content="{TemplateBinding Button.Content}" />
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" />
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
using:
<Button Content="Button"
HorizontalAlignment="Left"
Margin="36,140,0,147"
Width="151"
Style="{DynamicResource RadialButton}" />
but it does not work. Nothing happened. Why and how to solve this problem?
That's because you have Storyboard, but you don't play it.
Try add trigger to play that storyboard. Something like this:
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
</Trigger.EnterActions>
</Trigger>
Btw this is result of your animation:
You have to start your Storyboard. Your EventTrigger does nothing.
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
</EventTrigger>
Related
I have a custom ProgressBar control in XAML and I want to set a TextBox over it to write the ProgressBar Value. But I can't bind the Value correctly.
The code part to be fixed:
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ValueChanged">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="txt"
Storyboard.TargetProperty="Text">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0:0}%}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
UPDATED: Whole code in style.xaml (ResourceDictionary)
<Style x:Key="colorizedPB" TargetType="ProgressBar">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Viewbox>
<Border HorizontalAlignment="Left" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
BorderBrush="Gray" BorderThickness="1">
<Grid>
<Rectangle x:Name="rect" HorizontalAlignment="Left" Fill="{TemplateBinding Background}" Width="0" Height="{TemplateBinding Height}">
<Rectangle.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<TextBlock x:Name="txt" FontSize="13" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Text="test"/>
</Grid>
</Border>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ValueChanged">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="txt"
Storyboard.TargetProperty="Text">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ProgressBar}}, Path=Value, Mode=OneWay}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
In MainWindow.xaml
<Grid Grid.Column="1" Margin="8,102,10,53">
<ProgressBar Background="LightBlue" Name="progressBar" Style="{DynamicResource colorizedPB}" Width="200" Height="20"/>
</Grid>
Delete the EventTrigger and try this:
<TextBlock
x:Name="txt"
FontSize="13"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Value}"
/>
You may want to format Value, in which case you'll need to use a Binding instead:
<TextBlock
x:Name="txt"
FontSize="13"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0:0.00}}"
/>
I'm pretty much new to XAML and I'm trying to mimic following => menu
example menu (menu items I'm talking about google, facebook etc.)
Expected Behaviour:
Hoover on below Button
Should look like:
My code gives me only:
How do I achieve the expected output - make my TextBlock to appear and be part of the button?
My first approach was to use a grid and create two columns and have the second one always hidden and show only on hoover. Then I came up with belows button approach finally I found out about Expander class... Not sure whats the correct approach, below it's what I have so far, obviously far away from expected output.
<Button Name="button1" Width="170" Height="170" Cursor="Hand">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink">
MenuItem1
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Margin" Value="20,0,0,0" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
You can use animation to achieve this. Below is the Template for Button which uses animation to give Slide-In and Slide-Out effect on MouseEnter and MouseLeave events
<Button Name="button1" Cursor="Hand">
<Button.Template>
<ControlTemplate>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Grid.Column="1" x:Name="myTextBlock" Width="0" Height="48" VerticalAlignment="Center" HorizontalAlignment="Left" Background="pink">
MenuItem1
</TextBlock>
<TextBlock Grid.Column="1" Visibility="Hidden" Width="100" Height="48" x:Name="dummyBlock" />
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myTextBlock"
Storyboard.TargetProperty="Width"
From="0.0"
To="100"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="myTextBlock"
Storyboard.TargetProperty="Width"
From="100.0"
To="0"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Here is a fair start for implementing your requirements:
1.The Style uses render transform to stretch your button.
2.The button content changes cording to a bound bool
<UserControl ...>
<UserControl.Resources>
<!--*********** Templates ***********-->
<ControlTemplate x:Key="VIEWALLTemplate">
</ControlTemplate>
<ControlTemplate x:Key="DefultTemplate">
<StackPanel Background="White" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" />
<TextBlock Text="MenuItem1" Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink"/>
</StackPanel>
</ControlTemplate>
<!--*********** Styles ***********-->
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="1"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Button Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Content>
<ContentControl DataContext="{Binding}" Grid.Row="1">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource DefultTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=SomeBool}" Value="true">
<Setter Property="Template" Value="{StaticResource VIEWALLTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Button.Content>
</Button>
</Grid>
</UserControl>
I tried to trigger a Storyboard, whichs TargetName is set to a ScrollViewer, with the ToggleButton IsChecked Property, but it says that the TargetName could not be found in the namespace of ControlTemplate.. what makes sence, but I don't know how to refer it correctly.
So I wanted following to get:
ToggButton Click (IsChecked = true) --> ScrollViewer animates/changes trough Storyboard (StoryBoard1)
ToggButton Click Again (IsChecked = false) --> ScrollViewer animates/changes back trough Storyboard (StoryBoard2)
Here's my XAML:
<Window x:Class="myProject.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:ignore="http://www.galasoft.ch/ignore"
xmlns:view="clr-namespace:Messenger4u.View"
mc:Ignorable="d ignore">
<Window.Resources>
<ResourceDictionary>
<Storyboard x:Key="Storyboard1" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="200,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Window.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefiniton/>
<RowDefiniton/>
</Grid.RowDefinitions>
<ToggleButton Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<ToggleButton.Style>
<Style>
<Setter Property="ToggleButton.Background">
<Setter.Value>
<ImageBrush ImageSource="Skins/Images/btn-top-menu.png"/>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Skins/Images/btn-top-menu-hover.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ScrollViewer x:Name="ScrollViewer" Grid.Row="1"
Margin="0, 2, 0, 0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Grid>
<ContentControl Content="{Binding CurrentPageViewModel}"/>
</Grid>
</ScrollViewer>
</Grid>
</Window>
It's the usual problem with Controltemplate & XAML structure. try below code.:
<Window.Resources>
<ResourceDictionary>
<ScrollViewer x:Key="ScrollViewer"
Margin="0, 2, 0, 0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ContentControl Content="{Binding CurrentPageViewModel}"/>
</ScrollViewer>
<Storyboard x:Key="Storyboard1" SpeedRatio="3" >
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.Target="{StaticResource ScrollViewer}">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
Storyboard.Target="{StaticResource ScrollViewer}">
<EasingThicknessKeyFrame KeyTime="0" Value="200,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Window.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<ToggleButton.Style>
<Style>
<Setter Property="ToggleButton.Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/SOF.gif"/>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources/SOF.gif"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<ContentControl Content="{StaticResource ScrollViewer}" Grid.Row="1"/>
</Grid>
I've defined the ScrollViewer as a Resource and then use
StoryBoard.target property to animate. and it works fine.
You can directly give a name for the togglebutton and use it in the Storyboard.
<ToggleButton x:Name="myToggle"
Width="44" Height="34"
Margin="8, 0, 0, 0"
HorizontalAlignment="Left"
IsChecked="{Binding IsMenuOpen}"
IsEnabled="{Binding IsLoggedIn}">
<Storyboard x:Key="Storyboard1" SpeedRatio="3">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetName="myToggle"
Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ScrollViewer">
<EasingThicknessKeyFrame KeyTime="0" Value="0,2,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:1" Value="200,2,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
I have an expander that is styled (the toggle button basically spins around) which is good for when the expander expands in an upwardley mobile direction.
However I now want it to move in a horizontal direction, but I cant figure out what I need to add/change.
The main thing I tried was the obvious ExpandDirection="Left" property on the expander but that had no effect
This is my XAML:
<UserControl.Resources>
<!--Import the value converter-->
<helpers:MultiplyConverter x:Key="MultiplyConverter" />
<!--The control template for a toggle button (this will be used for the expander button)-->
<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="ExpanderButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}" >
<Grid>
<Rectangle Fill="Transparent"
Grid.ColumnSpan="2"/>
<Ellipse Name="Circle"
Grid.Column="0"
Stroke="DarkGray"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Path x:Name="Arrow"
Grid.Column="0"
Data="M 1,1.5 L 4.5,5 8,1.5"
Stroke="#FF666666"
StrokeThickness="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<RotateTransform Angle="90"/>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<!--The triggers for the toggle button (will animate the rotation from pointing down to up and vice versa-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="270"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="90"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- MouseOver, Pressed behaviours-->
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Stroke"
Value="#FF3C7FB1"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#222"
TargetName="Arrow"/>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Stroke"
Value="#FF526C7B"
TargetName="Circle"/>
<Setter Property="StrokeThickness"
Value="1.5"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#FF003366"
TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--A style for the expander-->
<ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton x:Name="ExpanderButton"
DockPanel.Dock="Left"
Template="{StaticResource AnimatedExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="1.5,0">
</ToggleButton>
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
>
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ScrollViewer.Height>
<MultiBinding Converter="{StaticResource MultiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ScrollViewer.Height>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<!--The expandr which encapsulates the settings for the given image-->
<Expander Name="expanderImageSettings"
Margin="5"
HorizontalAlignment="Stretch"
Grid.Row="1"
ExpandDirection="Left"
Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
VerticalAlignment="Top">
<!--The main grid for all controls-->
<Grid Name="grdMain">
<ContentPresenter Name="FeatureContentPresenter" Grid.Row="1"/>
</Grid>
</Expander>
Any help would be most appreciated
I have included the following style for ComboBox, which I happened to find as part of WPFToolkit some year ago.
It lacks one basic funcionality, that is, if I click inside the TextBox of the ComboBox, I want the dropdown menu to expand as usual. In this template the dropdown menu can only be opened by clicking the ComboBoxToggleButton directly.
I have no clue what to look for in the template style, can you please direct me somehow?
Template style:
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="rectangleOver"
Storyboard.TargetProperty="Opacity"
To="0.8" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFFFFFFF" />
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="rectangleOver"
Storyboard.TargetProperty="Opacity"
To="0" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFffffff" />
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="rectanglePress"
Storyboard.TargetProperty="Opacity"
To="0.8" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFFFFFFF" />
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="rectanglePress"
Storyboard.TargetProperty="Opacity"
To="0" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFffffff" />
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BackgroundChecked"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BackgroundChecked"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid">
<Rectangle x:Name="Background"
Fill="#ffffff"
Stroke="#ffc6c6c6"
RadiusX="3"
RadiusY="3"
IsHitTestVisible="false" />
<Rectangle x:Name="BackgroundChecked"
Margin="1"
IsHitTestVisible="false"
Opacity="0">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangleOver"
Width="15"
Stroke="#FFE8E8E8"
HorizontalAlignment="Right"
Opacity="0"
Fill="{DynamicResource MouseOverBrush}" />
<Rectangle x:Name="rectanglePress"
Width="15"
Stroke="#FC9E9D9B"
HorizontalAlignment="Right"
Opacity="0"
Fill="{DynamicResource PressedBrush}" />
<Rectangle x:Name="DisabledVisualElement"
Margin="1"
Fill="{DynamicResource DisabledBackgroundBrush}"
IsHitTestVisible="false"
Visibility="Collapsed" />
<Path x:Name="BtnArrow"
Margin="0,0,4,0"
Width="6"
Fill="{DynamicResource GlyphBrush}"
Stretch="Uniform"
HorizontalAlignment="Right"
Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}"
x:Name="PressedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}"
x:Name="PressedOn_BeginStoryboard" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver"
Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}"
x:Name="HoverOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked"
Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CheckedOff}"
x:Name="CheckedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CheckedOn}"
x:Name="CheckedOn_BeginStoryboard" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Visibility"
TargetName="DisabledVisualElement"
Value="Visible" />
<Setter Property="Fill"
TargetName="Background"
Value="{DynamicResource DisabledBackgroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="FontSize"
Value="13" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Padding"
Value="6,2,25,2" />
<Setter Property="Margin"
Value="3" />
<Setter Property="ToolTipService.ShowOnDisabled"
Value="True" />
<Setter Property="Template"
Value="{DynamicResource ComboBoxTemplate}" />
<Setter Property="Validation.ErrorTemplate"
Value="{StaticResource SablonaChybovehoHlaseni}" />
</Style>
<ControlTemplate x:Key="ComboBoxTemplate"
TargetType="{x:Type ComboBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="FocusedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<ToggleButton Grid.Column="2"
Template="{DynamicResource ComboBoxToggleButton}"
x:Name="ToggleButton"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" />
<ContentPresenter HorizontalAlignment="Stretch"
Margin="3,3,23,3"
x:Name="ContentSite"
VerticalAlignment="Top"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsHitTestVisible="True">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
TextWrapping="Wrap" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<!--Textbox for ComboBox-->
<!--Set transparent background of TextBox-->
<TextBox Visibility="Hidden"
Template="{DynamicResource ComboBoxTextBox}"
HorizontalAlignment="Stretch"
Margin="3,3,23,3"
x:Name="PART_EditableTextBox"
Style="{x:Null}"
VerticalAlignment="Top"
Focusable="True"
Background="Transparent"
TextWrapping="Wrap"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Rectangle x:Name="DisabledVisualElement"
Fill="{DynamicResource DisabledBackgroundBrush}"
Stroke="{DynamicResource DisabledBorderBrush}"
RadiusX="3"
RadiusY="3"
IsHitTestVisible="false"
Opacity="0" />
<Rectangle x:Name="FocusVisualElement"
Margin="-1"
RadiusX="3"
RadiusY="3"
Stroke="{DynamicResource FocusBrush}"
StrokeThickness="1"
IsHitTestVisible="false"
Opacity="0" />
<Popup IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
x:Name="Popup"
Focusable="False"
AllowsTransparency="True"
PopupAnimation="Slide"
Margin="0,1,0,0">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{TemplateBinding ActualWidth}"
x:Name="DropDown"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder"
Margin="0,-1,0,0"
BorderBrush="{DynamicResource ControlBorderBrush}"
BorderThickness="1"
CornerRadius="0,0,3,3"
Background="{DynamicResource WhiteColorBrush}">
<!--ControlBackgroundBrush-->
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
CanContentScroll="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Border>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FocusedOff}"
x:Name="FocusedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FocusedOn}" />
</Trigger.EnterActions>
<Setter Property="CornerRadius"
TargetName="DropDownBorder"
Value="3" />
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter Property="MinHeight"
Value="95"
TargetName="DropDownBorder" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Opacity"
TargetName="DisabledVisualElement"
Value="1" />
</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>
There are two use cases for the ComboBox. The first is when IsEditable is false. In this case, the user is restricted to selecting a predefined item. The second is when IsEditable is true, and this case allows the user to enter text as well as select a predefined item.
With the default Aero style, clicking in the "text" area (i.e. when IsEditable is true) does not bring up the drop-down. Clicking focuses/select the text instead. The other styles will open the drop-down though.
To accomplish this there is a transparent ToggleButton placed on top of the other control, which toggles the drop-down visibility. Something like:
<Grid Grid.IsSharedSizeScope="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"
SharedSizeGroup="ComboBoxButton"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_EditableTextBox"
Grid.Column="1"
Style="{StaticResource ComboBoxEditableTextBox}"
IsReadOnly="{Binding Path=IsReadOnly,RelativeSource={RelativeSource TemplatedParent}}"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ToggleButton Background="{x:Null}"
Grid.ColumnSpan="3"
Style="{StaticResource ComboBoxTransparentButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
This was pull from the default Style for Luna, which you can get from here (or download directly from here).