I am looking to create an application in Visual Studio C# that mimics the Android pattern lock screen, and was wondering if anyone had any tips for doing so.
This is not a commercial project and no money will be made, just a bit of fun.
I have been playing around in WPF Projects, and am at a loss for ideas right now. The only way I have thought of would be to track the mouse on a MouseDown event, and use the paint features in C# to "paint" where the mouse has been, but I don't feel that this is the best solution.
Any ideas for doing this?
See if this chould help you is rough code.
public partial class PatternLock : UserControl
{
bool isMouseDown = false;
private ObservableCollection<ToggleButton> selectedobject = new ObservableCollection<ToggleButton>();
public PatternLock()
{
InitializeComponent();
}
internal ObservableCollection<int> buttons = new ObservableCollection<int>();
private void layoutroot_Checked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
buttons.Add(Convert.ToInt32(((ToggleButton)e.OriginalSource).Content));
}
private void layoutroot_Unchecked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
{
int i = Convert.ToInt32(((ToggleButton)e.OriginalSource).Content);
buttons.Remove(i);
}
}
internal void ResetPattern()
{
if (buttons != null)
{
buttons.Clear();
foreach (ToggleButton item in layoutroot.Children)
{
item.IsChecked = false;
}
}
}
}
XAML
<UserControl x:Class="WPFTestings.LockPattern.PatternLock"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="FontSize" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid">
<Border x:Name="Border"
Background="{DynamicResource NormalBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="CheckedBorder"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="HoverBorder"
Background="YellowGreen"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="HoverShineBorder"
Background="{DynamicResource HoverShineBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="Pressed"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Rectangle x:Name="Shine"
Height="Auto"
Margin="2,2,2,2"
VerticalAlignment="Stretch"
Opacity="1"
RadiusX="3"
RadiusY="3"
Stroke="{x:Null}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0.042" EndPoint="0.5,0.971">
<GradientStop Offset="0" Color="#26FFFFFF" />
<GradientStop Offset="1" Color="#00FFFFFF" />
<GradientStop Offset="0.467" Color="#26FFFFFF" />
<GradientStop Offset="0.475" Color="#00FFFFFF" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Margin="4,4,4,4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="HoverOff_BeginStoryboard" Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="IsChecked" Value="true">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard" Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard" Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
<Setter TargetName="Pressed" Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
<Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" />
<Setter TargetName="grid" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource BlackColor}" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<UniformGrid x:Name="layoutroot"
Columns="3"
Rows="3"
ToggleButton.Checked="layoutroot_Checked"
ToggleButton.Unchecked="layoutroot_Unchecked">
<ToggleButton x:Name="btn1"
Margin="5"
Content="1" />
<ToggleButton x:Name="btn2"
Margin="5"
Content="2" />
<ToggleButton x:Name="btn3"
Margin="5"
Content="3" />
<ToggleButton x:Name="btn4"
Margin="5"
Content="4" />
<ToggleButton x:Name="btn5"
Margin="5"
Content="5" />
<ToggleButton x:Name="btn6"
Margin="5"
Content="6" />
<ToggleButton x:Name="btn7"
Margin="5"
Content="7" />
<ToggleButton x:Name="btn8"
Margin="5"
Content="8" />
<ToggleButton x:Name="btn9"
Margin="5"
Content="9" />
</UniformGrid>
</UserControl>
useing this is add dialog and button to match this as
if (string.Concat(patternLock1.buttons).ToString() == "1359")
{
this.Close();
}
else
{
patternLock1.ResetPattern();
}
Related
I want to change the Foreground (font color) of the mouse-over-day:
I've oriented myself on the following stackoverflow-question How Change datepicker's Selected Date Text Color (White) and also on the general calendar-style (github) of the mahapps-metro framework.
I not very good at styles and it took me a whole day to get the following output:
It changed the font color of the mouse-over day, nice! But the style for Background and selected cell is gone :(
<DatePicker
x:Name="dtpEnddate">
<DatePicker.Resources>
<Color
x:Key="NewColor">Pink</Color>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style
BasedOn="{StaticResource MahApps.Metro.Styles.BaseMetroCalendar}"
TargetType="Calendar">
<Setter
Property="CalendarDayButtonStyle">
<Setter.Value>
<Style
BasedOn="{StaticResource MahApps.Metro.Styles.MetroCalendarDayButtonStyle}"
TargetType="{x:Type CalendarDayButton}">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type CalendarDayButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition
GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState
x:Name="Normal" />
<VisualState
x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
<ColorAnimation
Duration="0"
To="{StaticResource NewColor}"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="NormalText" />
</Storyboard>
</VisualState>
<VisualState
x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState
x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation
Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="NormalText"
TextElement.Foreground="#000000"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<Rectangle
x:Name="HighlightBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
I tried to copy the complete code inside of the original source from <Style x:Key="MahApps.Styles.CalendarDayButton" TargetType="{x:Type CalendarDayButton}"> with the additional ColorAnimation inside of the MouseOver-VisualState, but it ended up in the same result without background and selected cell.
Do you have any tips how to change the font color of the day on mouse-over? I would prefer to create a new style-snippet based on the frameworks style, not to recreate the whole style.
Here is some additional code from my App.xaml. I don't know if this is the reason:
<Color
x:Key="AccentColor">#9e0000</Color>
<Color
x:Key="AccentColor2">#9e0000
</Color>
<Color
x:Key="AccentColor3">#9e0000
</Color>
<Color
x:Key="AccentColor4">#9e0000
</Color>
<Color
x:Key="AccentColorWhite">#FFFFFF</Color>
<SolidColorBrush
x:Key="lightGray"
Color="LightGray"></SolidColorBrush>
<SolidColorBrush
x:Key="HighlightBrush"
Color="{StaticResource HighlightColor}" />
<SolidColorBrush
x:Key="AccentBaseColorBrush"
Color="{StaticResource AccentBaseColor}" />
<SolidColorBrush
x:Key="AccentColorBrush"
Color="{StaticResource AccentColor}" />
<SolidColorBrush
x:Key="AccentColorBrush2"
Color="{StaticResource AccentColor2}" />
<SolidColorBrush
x:Key="AccentColorBrush3"
Color="{StaticResource AccentColor3}" />
<SolidColorBrush
x:Key="AccentColorBrush4"
Color="{StaticResource AccentColor4}" />
<SolidColorBrush
x:Key="WindowTitleColorBrush"
Color="{StaticResource AccentColor}" />
<Color
x:Key="IdealForegroundColor">White</Color>
<SolidColorBrush
x:Key="IdealForegroundColorBrush"
Color="{StaticResource IdealForegroundColor}" />
<SolidColorBrush
x:Key="IdealForegroundDisabledBrush"
Opacity="0.4"
Color="{StaticResource IdealForegroundColor}" />
<SolidColorBrush
x:Key="AccentSelectedColorBrush"
Color="{StaticResource IdealForegroundColor}" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<!-- Flat slider -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatSlider.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Red.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
Original Solution for Version 2.4.9
Unfortunately, if you need to adapt any part of control templates like visual states, you have to rewrite or copy it completely and adapt the parts in question. Styles can be based on others, but control templates cannot. However, as you already found out, you only have to adapt the calendar button style, not all styles for calendar.
Your style seems to be heavily edited and compared to the base style, there is a lot missing, which causes the missing visual representation. If you want to change the mouse over foreground color, you only have to add a Trigger to the control template triggers, that observes if IsMouseOver is True. Then you can set the Foreground brush to your NewBrush (I renamed it to brush).
<!-- IsMouseOver -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{StaticResource NewBrush}" />
</Trigger>
In this case, change your resource to a brush instead of a color (Foreground is of type Brush).
<SolidColorBrush x:Key="NewBrush" Color="Pink"/>
This is the whole DatePicker with the copied and adapted style for the calendar day buttons.
<DatePicker x:Name="dtpEnddate">
<DatePicker.Resources>
<SolidColorBrush x:Key="NewColor" Color="Pink"/>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}"
BasedOn="{StaticResource MahApps.Styles.Calendar.DateTimePicker}">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type CalendarDayButton}">
<Setter Property="FontFamily" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontFamily, Mode=OneWay}" />
<Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontSize, Mode=OneWay}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="Padding" Value="5 1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<Rectangle x:Name="TodayBackground"
Fill="{DynamicResource MahApps.Brushes.Accent}"
Opacity="0" />
<Rectangle x:Name="SelectedBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="HighlightBackground"
Fill="{DynamicResource MahApps.Brushes.Accent4}"
Opacity="0" />
<Path x:Name="Blackout"
Margin="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
Fill="{DynamicResource MahApps.Brushes.Accent3}"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill" />
<ContentPresenter x:Name="NormalText"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<Rectangle x:Name="DayButtonFocusVisual"
IsHitTestVisible="false"
Stroke="{DynamicResource MahApps.Brushes.Accent3}"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive" />
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualState x:Name="NormalDay" />
<VisualState x:Name="BlackoutDay" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<!-- IsInactive -->
<Trigger Property="IsInactive" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Gray2}" />
</Trigger>
<!-- IsMouseOver -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{StaticResource NewColor}" />
</Trigger>
<!-- IsSelected -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.AccentBase}" />
</Trigger>
<!-- IsToday, IsTodayHighlighted and IsSelected -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="DayButtonFocusVisual" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray1}" />
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Accent}" />
</MultiDataTrigger>
<!-- IsToday and IsTodayHighlighted -->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.Selected.Foreground}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="1" />
</MultiDataTrigger>
<!-- IsBlackedOut -->
<Trigger Property="IsBlackedOut" Value="True">
<Setter TargetName="Blackout" Property="Opacity" Value="1" />
</Trigger>
<!-- IsToday and IsBlackedOut -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsToday" Value="True" />
<Condition Property="IsBlackedOut" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Blackout" Property="Fill" Value="{DynamicResource MahApps.Brushes.Accent}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="0.5" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
This is what the result looks like for Red theme (might not be yours).
Update for Version 1.6.5
As you mentioned later in the comments, you are using MahApps.Metro version 1.6.5. Styles and templates change over time. The old version is incompatible with the current version.
Here is an adapted style based on the default style of the correct version.
<DatePicker x:Name="dtpEnddate">
<DatePicker.Resources>
<SolidColorBrush x:Key="NewBrush" Color="Pink"/>
</DatePicker.Resources>
<DatePicker.CalendarStyle>
<Style TargetType="{x:Type Calendar}"
BasedOn="{StaticResource MahApps.Metro.Styles.MetroCalendar}">
<Setter Property="CalendarDayButtonStyle">
<Setter.Value>
<Style TargetType="{x:Type CalendarDayButton}">
<Setter Property="FontFamily" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontFamily, Mode=OneWay}" />
<Setter Property="FontSize" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=FontSize, Mode=OneWay}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<Rectangle x:Name="TodayBackground"
Fill="{DynamicResource AccentColorBrush}"
Opacity="0" />
<Rectangle x:Name="SelectedBackground"
Fill="{DynamicResource AccentColorBrush4}"
Opacity="0" />
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="HighlightBackground"
Fill="{DynamicResource AccentColorBrush4}"
Opacity="0" />
<Path x:Name="Blackout"
Margin="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
Fill="{DynamicResource AccentColorBrush3}"
Opacity="0"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill" />
<ContentPresenter x:Name="NormalText"
Margin="5 1 5 1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<Rectangle x:Name="DayButtonFocusVisual"
IsHitTestVisible="false"
Stroke="{DynamicResource AccentColorBrush3}"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.75"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0.9"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="Opacity"
To=".35"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Active" />
<VisualState x:Name="Inactive">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalText"
Storyboard.TargetProperty="(TextElement.Foreground)"
Duration="0">
<DiscreteObjectKeyFrame Value="{DynamicResource GrayBrush2}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay" />
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Blackout"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource NewBrush}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentColorBrush}" />
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="DayButtonFocusVisual" Property="Stroke" Value="{DynamicResource GrayBrush1}" />
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentColorBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}, Path=IsTodayHighlighted}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsToday}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="1" />
</MultiDataTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsToday" Value="True" />
<Condition Property="IsBlackedOut" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="Blackout" Property="Fill" Value="{DynamicResource AccentColorBrush}" />
<Setter TargetName="TodayBackground" Property="Opacity" Value="0.5" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</Setter.Value>
</Setter>
</Style>
</DatePicker.CalendarStyle>
</DatePicker>
Here's my code:
<StackPanel Name="stackPanelMain" Orientation="Vertical">
<RadioButton Content="Work" Style="{StaticResource Rick_RadioButtonOption}"/>
<RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}"/>
</StackPanel>
Here's the style:
<Style TargetType="RadioButton" x:Key="Rick_RadioButtonOption">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
</Style>
I've increased the padding so it is more obvious what is happeing. The text is centred as expected/required but the actual radio button remains top-left:
How do I get the radio button centred vertically and to the right slightly? I have tried the solution here but it doesn't work for my situation.
EDIT
As per #asitis request - this is what I get if I set these 2 properties in the style:
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="Red" />
This can be done just with modifying of the default style of a RadioButton. You can use the LiveVisualTree to see the default style of RadioButton, a RadioButton is actually a Grid, which contains another Grid with 3 Ellipses and a ContentPresenter like this:
Using the Live Visual Tree can get a real-time view of your running XAML code, you can use this tool in VS2015 when you debug the app, open it at the left side of vs2015:
If you edit a copy of the RadioButton's default style, you can see the Grid with 3 Ellipses is like this <Grid Height="32" VerticalAlignment="Top">. This is the reason why your Ellipses is on the top. So you can customize the style like this:
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<!--<Setter Property="Padding" Value="8,6,0,0" />-->
<Setter Property="Padding" Value="27" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Margin" Value="5" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
......
<Grid Height="32" VerticalAlignment="Center">
<Ellipse x:Name="OuterEllipse" Height="20" Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
<Ellipse x:Name="CheckOuterEllipse" Fill="{ThemeResource SystemControlHighlightTransparentBrush}" Height="20" Opacity="0" Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
<Ellipse x:Name="CheckGlyph" Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" Height="10" Opacity="0" UseLayoutRounding="False" Width="10" />
</Grid>
......
</Style>
By the way, to modify the template of RadioButton, we can select the "[RadioButton]" in "Document Outline" and right click, then select "Edit Template" → "Edit a Copy...".
set verticalAligment property as a center for RadioButton ,
Ellipse in the Radiobutton is always on top, To solve this problem, you must change the template
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="Center">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
add in page or application resources this control template:
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="RadioButton">
<Grid Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="OuterEllipse"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="CheckOuterEllipse"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center" Height="32" >
<Ellipse x:Name="OuterEllipse"
Width="20"
Height="20"
UseLayoutRounding="False"
Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
<Ellipse x:Name="CheckOuterEllipse"
Width="20"
Height="20"
UseLayoutRounding="False"
Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}"
Fill="{ThemeResource SystemControlHighlightTransparentBrush}"
Opacity="0"
StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}"
/>
<Ellipse x:Name="CheckGlyph"
Width="10"
Height="10"
UseLayoutRounding="False"
Opacity="0"
Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Grid.Column="1"
AutomationProperties.AccessibilityView="Raw"
TextWrapping="Wrap" />
</Grid>
</ControlTemplate>
and apply it to your radio button in this manner:
<RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}" Template="{StaticResource RadioButtonControlTemplate1}"/>
Margin and Padding have 4 values: Left, Top, Right, Bottom. If you use one value only, all four values will be set identical. To move a RadioButton to the right you must increase the Left Margin value. You should also use TargetType="{x:Type RadioButton}":
<Style TargetType="{x:Type RadioButton}" x:Key="Rick_RadioButtonOption">
<Setter Property="Background" Value="White" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="10,5,5,5" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Padding" Value="27" />
</Style>
I am making my own costumed button, which has a label in it. For some reason, my button doesn't react to the 'click' event, and the click function doesn't lunch. why?
here is my button style xaml code:
<Style x:Key="MyMenuButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#AF4EB4EC"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,0,5,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Rectangle Fill="{TemplateBinding Background}" StrokeThickness="0" MinWidth="{Binding ElementName=lblCnt,Path=Width}"/>
<Label Name="lblCnt" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" Background="{TemplateBinding Background}"
Height="auto" Width="auto"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="White"/>
</Trigger>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard >
<Storyboard>
<!--<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.200" By="30"/>-->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Duration="0:0:0.200"
From="12" To="22"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
Duration="0:0:0.200"
From="#AF4EB4EC" To="White"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Duration="0:0:0.200"
From="White" To="#AF4EB4EC"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard>
<Storyboard >
<!--<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.100"
By="-30"/>-->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Duration="0:0:0.100"
From="22" To="12"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
Duration="0:0:0.100"
From="White"
To="#AF4EB4EC"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Duration="0:0:0.100"
From="#AF4EB4EC"
To="White"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
and this is the complete xaml code:
<Window x:Class="FMS_Csharp_GUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="File Indexer" Height="552" Width="864" Icon="magna-folder-icon.ico">
<Window.CommandBindings>
<CommandBinding Command="New" CanExecute="CanExeNewRepo" Executed="ClickNewRepo"/>
<CommandBinding Command="Delete" CanExecute="CanExeNewRepo" Executed="ClickDeleteRepo"/>
</Window.CommandBindings>
<Window.Resources>
<StackPanel x:Key="documentStackPanelStyle" Orientation="Horizontal" >
<Image Source="Images/openDoc.ico" Width="32" Height="32"/>
<Label Content="" VerticalAlignment="Center"/>
</StackPanel>
<Style x:Key="MyMenuButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#AF4EB4EC"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,0,5,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid >
<Rectangle Fill="{TemplateBinding Background}" StrokeThickness="0" MinWidth="{Binding ElementName=lblCnt,Path=Width}"/>
<Label Name="lblCnt" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" Background="{TemplateBinding Background}"
Height="auto" Width="auto"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="White"/>
</Trigger>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard >
<Storyboard>
<!--<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.200" By="30"/>-->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Duration="0:0:0.200"
From="12" To="22"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
Duration="0:0:0.200"
From="#AF4EB4EC" To="White"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Duration="0:0:0.200"
From="White" To="#AF4EB4EC"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard>
<Storyboard >
<!--<DoubleAnimation Storyboard.TargetProperty="Width"
Duration="0:0:0.100"
By="-30"/>-->
<DoubleAnimation Storyboard.TargetProperty="FontSize"
Duration="0:0:0.100"
From="22" To="12"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
Duration="0:0:0.100"
From="White"
To="#AF4EB4EC"/>
<ColorAnimation Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
Duration="0:0:0.100"
From="#AF4EB4EC"
To="White"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid x:Name="grdContents" Margin="0,23,0,76">
<Grid Name="grdUserInfo" HorizontalAlignment="Right" Height="50" VerticalAlignment="Top" Width="189" Margin="0,-18,0,0">
<Image Name="imgUser" Source="Images/notloggedin.jpg" HorizontalAlignment="Right" Height="49.667" VerticalAlignment="Top"/>
<Label Name="lblUser" Content="you are not logged in!" Margin="0,0,54.667,0" HorizontalAlignment="Right" Width="134.333" Height="49.667" VerticalAlignment="Top"/>
</Grid>
<StackPanel Name="stkpMyStyledMenu" Height="47" Margin="0,10,0,0" Background="#FF4EA2EC" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel.Resources>
<Style BasedOn="{StaticResource MyMenuButtonStyle}" TargetType="Button"/>
</StackPanel.Resources>
<Button Content="New Repo" Click="myMenuNewRepo"/>
<Button Content="Open Repo" Click="MyMenuClickOpenRepo" />
<Button Content="Login" Click="MyMenuClickLogin"/>
<Button Content="Exit" Click="MyMenuClickExit"/>
</StackPanel>
<GroupBox Header="Input" Name="grpInput" HorizontalAlignment="Left" Margin="145,0,0,120" VerticalAlignment="Bottom" RenderTransformOrigin="0.352,-0.304" Height="185" Width="290">
</GroupBox>
<Button Content="Button" HorizontalAlignment="Left" Margin="205,70,0,0" VerticalAlignment="Top" Width="75" Click="MyMenuClickNewRepo"/>
<Button Content="Button" Click="MyMenuClickOpenRepo" HorizontalAlignment="Left" Margin="285,70,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
<ListBox Name="lstMessages" Height="61" VerticalAlignment="Bottom"/>
</Grid>
Use Snoop's events tab to determine which control is handling your click.
Could it be you set something in a way that the label gets the click? You could check binding some handler-code to the Click event of the label.
I'm new to WPF and have been looking at a lot of articles and videos but I've been unable to find a solution. What I have is a button which displays an image and text within a stackpanel. I would like to make ONLY the textblock move one pixel to the right and down when the button is pressed but I cant seem to figure out a way to target only the TextBlock. Any help would be greatly appreciated. THANKS
<Style x:Key="appFlatButtonLarge" TargetType="{x:Type localUI:ImageButton}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Foreground" Value="{StaticResource appPrimaryBackColorDark}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type localUI:ImageButton}">
<Border Name="Border" BorderBrush="LightGray" BorderThickness="1" Background="White" >
<StackPanel Name="Panel" Height="Auto" Orientation="Horizontal" Background="Transparent">
<Image Name="ibImage" Source="{TemplateBinding ImageSource}" Margin="5" Width="Auto" Height="Auto" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>
<TextBlock Name="ibTextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Left" FontWeight="Bold" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="12" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Panel" Property="Background" Value="{StaticResource appButtonBackColorPressed}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource appPrimaryBackColorDark}" />
<Setter TargetName="ibImage" Property="Source" Value="{Binding Path=ImageSourceHot, RelativeSource={RelativeSource AncestorType={x:Type localUI:ImageButton}} }" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Just use a TranslateTransform animation. make sure to use RenderTransform and not LayoutTransform as LayoutTransform will actually change the Layout which might not be desirable when the parent of your TextBlock and Image is a StackPanel
So in your Style if I switch the ControlTemplate definition to:
<ControlTemplate TargetType="{x:Type localUI:ImageButton}">
<Border x:Name="Border"
Background="White"
BorderBrush="LightGray"
BorderThickness="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0"
Value="5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ibTextBlock"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0"
Value="5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="Panel"
Height="Auto"
Background="Transparent"
Orientation="Horizontal">
<Image Name="ibImage"
Width="Auto"
Height="Auto"
Margin="5"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.EdgeMode="Aliased"
Source="{TemplateBinding ImageSource}"
Stretch="None" />
<TextBlock x:Name="ibTextBlock"
Margin="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="12"
FontWeight="Bold"
RenderTransformOrigin="0.5,0.5"
Text="{TemplateBinding Content}">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
...
you should get what you're after.
Note
In both the Animation steps I've set
<EasingDoubleKeyFrame KeyTime="0" Value="5" />
you can change the Value to "1" or whatever you desire.
You could change the Margin-Property of your TextBlock with the same trigger that changes the BorderBrush.
Say you set Margin = "2,2,2,2" initially, and then you set it to "3,2,1,2" when the button is pressed.
Your TextBlock will 'move' by 1/96 inch (usually, you don't pixel in WPF).
You can also use negative margins, if needed.
I'm new to WPF, and I would like to know how to reuse some annoying xaml I have to avoid duplicating.
<Button Cursor="Hand" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="MyButton" Style="{StaticResource ButtonTemplate}" Width="286" Content="hi!" Focusable="False" IsTabStop="False"/>
<Button Cursor="Hand" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="MyButton2" Style="{StaticResource ButtonTemplate}" Width="286" Content="hi 2!" Focusable="False" IsTabStop="False"/>
I'd really like to use something like this template:
<Style TargetType="{x:Type Button}" x:Key="ButtonTemplate">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="btGrid">
<Path Cursor="Hand" HorizontalAlignment="Left" Stretch="Fill" Stroke="{x:Null}" Opacity="0" x:Name="path"/>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Visibility="Hidden" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard SlipBehavior="Slip" BeginTime="00:00:00">
<MediaTimeline Source="{Binding StringFormat={}, Path=Name}" Storyboard.TargetName="{Binding StringFormat={}_wma, Path=Name}"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="{Binding StringFormat=key{}, Path=Name}" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>
Visible
</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="{Binding StringFormat=key{}, Path=Name}" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>
Hidden
</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I'd like the {Binding StringFormat={}, Path=Name} to point button's name, e.g. "MyButton", "MyButton2", etc.
When I run this code I get the error "Cannot freeze this Storyboard timeline tree for use across threads." :/ I understand this is because I use binding in a storyboard, correct? I don't know what to do to make this work.
Also, I'd like to make the ToggleVisibility of the image a template as well, that accepts once "Visible" and once "Hidden" values.
Thanks in advance!
You could always define properties other than Template in your style too.
<Style TargetType="{x:Type Button}"
x:Key="ButtonTemplate">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Width" Value="286" />
<Setter Property="Focusable" Value="False" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
...
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which makes your code look like
<Button x:Name="MyButton" Style="{StaticResource ButtonTemplate}" Content="hi!" />
<Button x:Name="MyButton2" Style="{StaticResource ButtonTemplate}" Content="hi 2!" />
Yeah creating a style with target type to as button would do the trick.
Tip:It is always a good practice to write all the styling informations such as border, background, templates, etc., under the resource section of your code and apply them on the controls. It'll give good readability.
HTH :)