The following code triggers a ColorAnimation when window is loaded.
How can I trigger a ColorAnimation when TabItem.IsSelected gets true instead?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
</LinearGradientBrush>
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="myGradientStop" Storyboard.TargetProperty="Color" From="Pink" To="Lavender" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl>
<TabItem Header="TabItem1">
<Label Content="TabItem1 content goes here..." />
</TabItem>
<TabItem Header="TabItem2">
<Label Content="TabItem2 content goes here..." />
</TabItem>
<TabItem Header="TabItem3">
<Label Content="TabItem3 content goes here..." />
</TabItem>
</TabControl>
</Grid>
</Window>
Thanks in advance.
You should change your EventTrigger to a Trigger on the TabItem.IsSelected property and move it in the ControlTemplate.Triggers collection that you already have.
Your ControlTemplate would become:
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
<Trigger.EnterActions>
<BeginStoryboard x:Name="beginStoryboard">
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="myGradientStop"
Storyboard.TargetProperty="Color"
From="Pink"
To="Lavender"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="beginStoryboard"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I assumed you wanted to stop the animation when the TabItem gets unselected so I added a RemoveStoryboard exit action in the Trigger.
I am trying to create a simple button style, that will change the opacity of the background from 0.0 to 1.0 on mouse over (and vice versa). I am creating a template for said button and I am binding all the properties in the template. It all works properly except the SolidColorBrush in background, that I can not bind to the template binding. I've seen some mentions of TemplateBinding not being the right one due to contexts, but I am not able to find another solution. I suspect, there might be a problem of Background being a Brush and I need just a Color component of that brush, but I am not able to obtain it.
The obvious override is to create two template styles with two different colors (which works), but I would like to avoid such hard-coding and copy-paste. What I would like to have is an option to specify Background property on Button, that would be used in SolidColorBrush and then the opacity would do the rest.
<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle">
<Setter Property="Width" Value="46" />
<Setter Property="Height" Value="32" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Background>
<SolidColorBrush x:Name="ButtonBackgroundBrush" Color="???" Opacity="0.0" />
</Border.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseOverAnimation">
<DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.15" />
</Storyboard>
<Storyboard x:Key="MouseOutAnimation">
<DoubleAnimation Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.15" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, the button is used like this:
<Button x:Name="MinimizeButton" Style="{StaticResource WindowButtonStyle}" Click="MinimizeButton_Click" Background="Green">
<Image Source="../Resources/WindowButtons/Images/win-minimize.png" Width="12" Height="12"></Image>
</Button>
Added Background="Green" property setting to test it, but did not worked.
You could use a TemplateBinding to bind the Background property of the Border to the Background of the Button and then animate the Opacity property of the SolidColorBrush like this:
<Style TargetType="{x:Type Button}" x:Key="WindowButtonStyle">
<Setter Property="Width" Value="46" />
<Setter Property="Height" Value="32" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseOverAnimation">
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="1.0" Duration="0:0:0.15" />
</Storyboard>
<Storyboard x:Key="MouseOutAnimation">
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)" To="0.0" Duration="0:0:0.15" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Answering my own, as always - you figure out the solution just after you post on S/O. So I hope it will help someone:
...
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border.Background>
<!-- ReSharper disable once Xaml.BindingWithContextNotResolved -->
<SolidColorBrush x:Name="ButtonBackgroundBrush" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background.Color}" Opacity="0.0" />
</Border.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
...
I've included the ReSharper disable as well, because the warning form ReSharper was what kept me from trying this one - and desperation forced me to try it anyway.
I have a WPF application that contains a datagrid. The datagrid is bound to my object OrderBlock which contains a List of type Orders.
<DataGrid DataContext="{Binding OrderBlock}"
Name="dataGridOrdersGood"
ItemsSource="{Binding Orders}"
This works fine and displays nicely in my datagrid. There is one property (StatusGood) in my List though that I would like to display as a combobox where there can be only two values, "Send" or "Hold".
If the value in the combobox is "Hold" I would like the row to turn different colour. Ideally using a linear gradient going from silver to yellow. I have tried the code below - literally just trying to turn the row red for the moment but nothing happens. I can't see what is wrong with my code below. The trigger part is very close to the bottom of the code below. I'm new to WPF and struggling with it at the moment. The code below has mainly come from a very good post that can be found here, http://www.codeproject.com/Articles/586132/WPF-DataGrid-Custommization-using-Style-and-Templa
<!-- Data grid formatting Grid Row template -->
<Style x:Key="DG_Row" TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="LightGreen"/>
<Setter Property="Opacity" Value="1"/>
<Setter Property="Padding" Value="3,2,2,3"/>
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Offset="1" Color="Silver"/>
</LinearGradientBrush>
</Border.Background>
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<DataGridDetailsPresenter Grid.Row="1"
Grid.Column="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
Converter={x:Static DataGrid.RowDetailsScrollingConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Visibility="{TemplateBinding DetailsVisibility}" />
<DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
</SelectiveScrollingGrid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Normal_AlternatingRow">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#AAF0C570" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="DGR_Border"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#AAFF7F00" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal_Selected">
<Storyboard>
<!-- ColorAnimation here same as Normal_AlternatingRow state -->
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<!-- ColorAnimation here same as Normal_AlternatingRow state -->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
<Style.Triggers>
<DataTrigger Binding="{Binding Active}" Value="Hold">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Setter>
</Style>
As always any help would be great.
Thanks
M
Do you need to change the behaviour of the DataGridRow, or is it sufficient to alter the style?
If changing the row highlighting based on a property is all you need, you should be able to just use a simpler Style, something like this:
<!-- A brush -->
<LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#888888"/>
<GradientStop Offset="1" Color="#FFFFF86E"/>
</LinearGradientBrush>
<!-- Your row style -->
<Style x:Key="HighlightRow" TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<DataTrigger Binding="{Binding StatusGood}" Value="Hold">
<Setter Property="Background" Value="{StaticResource BgBrush1}" />
</DataTrigger>
</Style.Triggers>
</Style>
You should be able to apply the style when required in a DataGrid by using your style as a StaticResource for the RowStyle property:
<DataGrid DataContext="{Binding OrderBlock}"
Name="dataGridOrdersGood"
ItemsSource="{Binding Orders}"
RowStyle="{StaticResource HighlightRow}" />
Edit:
If you want to retain the rest of your styling and use a control template, you can place your DataTrigger in your ControlTemplate.Triggers, you'll also have to supply a TargetName property, to specify the element you wish the trigger to act on, so using my above brush, and your initial code:
<!-- Data grid formatting Grid Row template -->
<Style x:Key="DG_Row" TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<!-- Your code -->
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<!-- Your code -->
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding StatusGood}" Value="Send">
<Setter TargetName="DGR_Border" Property="Background" Value="{StaticResource BgBrush1}"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Where DGR_Border is the name you had given your border with the existing gradient.
I have made a small application using WPF that has some controls. One of those controls is a Textblock named Credit, another control is a Frame, and inside that frame Pages are open. For example: SendMessage.xaml
What i would like someone to help me with, is to explain if there is a way to press a button inside the page SendMessage.xaml, and update the Textblock in the window containing the frame.
my window xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:testeSMS"
xmlns:Properties="clr-namespace:testeSMS.Properties"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" mc:Ignorable="d"
x:Class="testeSMS.JanelaPrincipal"
x:Name="Window"
Title="JanelaPrincipal"
Width="640" Height="480" WindowStyle="None" BorderThickness="1" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Window.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="closeBT">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<local:CloseBT x:Name="closeBT" Foreground="{x:Null}" Opacity="0.3"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" OpacityMask="Black"/>
</Grid>
<ControlTemplate.Triggers>
<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>
<Style x:Key="ButtonStyle3" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#FF33FFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label x:Name="label" Content="Nome da APP by © Kineth Networks" Foreground="#FF3399FF" FontSize="8"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
</Grid>
<ControlTemplate.Triggers>
<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>
<LinearGradientBrush x:Key="MenuBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F6F6F6" Offset="0.25"/>
<GradientStop Color="#EAE8E8" Offset="0.25"/>
<GradientStop Color="#DCD9D9" Offset="0.8"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
<Setter Property="Background" Value="{StaticResource MenuBackground}"/>
<Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MenuFontFamilyKey}}"/>
<Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MenuFontSizeKey}}"/>
<Setter Property="FontStyle" Value="{DynamicResource {x:Static SystemFonts.MenuFontStyleKey}}"/>
<Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MenuFontWeightKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMainMenu" Value="True"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadPanelBarStyle1" TargetType="{x:Type telerik:RadPanelBar}">
<Setter Property="KeyboardNavigation.TabNavigation" Value="Local"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<telerik:PanelBarPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadPanelBar}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Vertical">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(telerik:LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="0"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Horizontal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(telerik:LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<RotateTransform Angle="-90"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False" Foreground="#FF2D2C2C">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Margin="0,-1,0,0" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:StyleManager.Theme>
<telerik:Expression_DarkTheme/>
</telerik:StyleManager.Theme>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</telerik:LayoutTransformControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Orientation" Value="Vertical"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Foreground" Value="#FFDDDDDD"/>
<Setter Property="BorderBrush" Value="#FF595959"/>
<Setter Property="Background" Value="#FF3D3D3D"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<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>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="ButtonStyle4" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" OpacityMask="Black"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle5" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="label">
<EasingColorKeyFrame KeyTime="0" Value="#FF4FAAFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label x:Name="label" Content="[Logout]" Foreground="White" FontSize="10.667"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
</Grid>
<ControlTemplate.Triggers>
<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>
</Window.Resources>
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00F0F0FF" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Window.Background>
<Window.Effect>
<DropShadowEffect/>
</Window.Effect>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF0F0FF" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Rectangle MouseDown="Rectangle_MouseDown_1" Height="66" VerticalAlignment="Top" Width="639">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1D2D42" Offset="0"/>
<GradientStop Color="#FF35537A" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1D2D42" Offset="0"/>
<GradientStop Color="#FF35537A" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image Height="66" Margin="0,0,477.5,0" Source="logo2.png" Stretch="Fill" VerticalAlignment="Top" OpacityMask="Black">
<Image.Effect>
<DropShadowEffect BlurRadius="10" RenderingBias="Quality" ShadowDepth="4"/>
</Image.Effect>
</Image>
<Button Content="Button" Click="Button_Click_1" Height="10" Margin="0,0,6,464" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="12"/>
<Button Content="Button" Click="Button_Click_2" Height="1.667" Margin="0,13.583,20.653,0" Style="{DynamicResource ButtonStyle1}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="9.833"/>
<Label Content="Nome da App © Kineth Networks" Margin="285.5,0,160.006,-2.96" VerticalAlignment="Bottom" FontSize="9.333" Foreground="#80000000" FontWeight="Bold"/>
<Frame x:Name="mainFrame" Content=". . ." Margin="0,66,0,23.453" HorizontalAlignment="Right" Width="513" NavigationUIVisibility="Hidden" />
<DockPanel LastChildFill="False" Margin="0,66,0,0" HorizontalAlignment="Left" Width="125" Background="#FF3D3D3D">
<telerik:RadPanelBar Focusable="False" Height="174.5" Width="123" Margin="0,0,0,235.5" telerik:StyleManager.Theme="Expression_Dark" BorderThickness="0" Background="#FF3D3D3D" BorderBrush="Black" VerticalAlignment="Bottom" HorizontalAlignment="Center" Style="{DynamicResource RadPanelBarStyle1}">
<telerik:RadPanelBarItem DropPosition="Inside" Header="Contactos" Width="123" Background="{x:Null}" BorderBrush="#5A000000" FontWeight="Bold" Margin="0,0,0,1" BorderThickness="1,0,1,1">
<telerik:RadPanelBarItem Click="RadPanelBarItem_Click_2" Header="Inserir" Width="100" HorizontalAlignment="Left" Margin="0,2,0,0"/>
<telerik:RadPanelBarItem Click="RadPanelBarItem_Click_5" Header="Listar" Width="100" HorizontalAlignment="Left" Margin="0,1,0,0"/>
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem DropPosition="Inside" Header="Grupos" Width="123" Background="{x:Null}" BorderBrush="#59000000" FontWeight="Bold" Margin="0,0,0,1">
<telerik:RadPanelBarItem Click="RadPanelBarItem_Click_3" Header="Inserir" Width="100" HorizontalAlignment="Left" Margin="0,2,0,0"/>
<telerik:RadPanelBarItem Click="RadPanelBarItem_Click_4" Header="Listar" Width="100" HorizontalAlignment="Left" Margin="0,1,0,0" IsExpanded="True"/>
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem DropPosition="Inside" Header="SMS" Width="123" Background="{x:Null}" BorderBrush="#59000000" FontWeight="Bold" Margin="0,0,0,1">
<telerik:RadPanelBarItem Click="RadPanelBarItem_Click_1" Header="Enviar" Width="100" HorizontalAlignment="Left" Margin="0,2,0,0"/>
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem DropPosition="Inside" Header="Info" Width="123" Background="{x:Null}" BorderBrush="#59000000" FontWeight="Bold" Margin="0,0,0,1">
<telerik:RadPanelBarItem Header="Historico" Width="100" HorizontalAlignment="Left" Margin="0,1,0,0"/>
<telerik:RadPanelBarItem Header="Creditos" Width="100" HorizontalAlignment="Left" Margin="0,1,0,0"/>
</telerik:RadPanelBarItem>
<telerik:RadPanelBarItem DropPosition="Inside" Header="Pacotes" Width="123" Background="{x:Null}" BorderBrush="#59000000" FontWeight="Bold" Margin="0,0,0,1" BorderThickness="1,1,1,2">
<telerik:RadPanelBarItem Header="Gerir" Width="100" HorizontalAlignment="Left" Margin="0,1,0,0"/>
</telerik:RadPanelBarItem>
</telerik:RadPanelBar>
</DockPanel>
<TextBlock x:Name="labelCredito" Text="0 sms" HorizontalAlignment="Right" Margin="0,51,68,0" VerticalAlignment="Top" Foreground="White" FontFamily="/testeSMS;component/Fonts/#Segoe UI" FontSize="10.667" IsManipulationEnabled="True"/>
<Label Content="Username:" HorizontalAlignment="Right" Margin="0,30,61.899,0" VerticalAlignment="Top" FontSize="10.667" Foreground="White"/>
<Label x:Name="lb_username" Content="Son Goku" HorizontalAlignment="Right" Margin="0,30,0,0" VerticalAlignment="Top" Foreground="White" FontSize="10.667" FontWeight="Bold"/>
<Button Content="Button" HorizontalAlignment="Right" Height="23.959" Margin="0,45,5.5,0" Style="{DynamicResource ButtonStyle5}" VerticalAlignment="Top" Width="49.879" Click="Logout_Butt"/>
</Grid>
the method in the code behind file that opens a page
private void RadPanelBarItem_Click_1(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
mainFrame.Source = new Uri("SmS_Enviar.xaml", UriKind.Relative);
}
and on the SmS_Enviar.xaml page i have a method that when i press a button does some operations, after the operations are done i want to update a label on my "JanelaPrincipal" window
You could use MVVMLight's Messenger for this, or another implementation of the mediator pattern. Have the code in the page send a message, and the containing window code subscribe to the message.
Right now i can change the look of the button to an ellipse with a background image.
However, when i click on it, i don't feel the CLICKING EFFECT of the normal buttons in Silverlight
Can anyone help me how to get that effect?
this is my XAML style for the round button
<style x:Key="roundButton" TargetType="Button">
<Setter Properties="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Ellipse width="100" height="100">
<Ellipse.Fill>
<ImageBrush ImageSource="./icon.png">
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
after searching around i know that i should use the VisualStateManager in Systems.Window. This is how my XAML looks now but i still can't get the CLICKING feeling like normal buttons
<Style x:Key="roundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="100" Height="100">
<Ellipse.Fill>
<ImageBrush ImageSource="./icon.png" />
</Ellipse.Fill>
</Ellipse>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver"/>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed"/>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to set the triggers for your button for the respective state.
<style x:Key="roundButton" TargetType="Button">
<Setter Properties="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Ellipse width="100" height="100">
<Ellipse.Fill>
<ImageBrush ImageSource="./icon.png"/>
</Ellipse.Fill>
</Ellipse>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!-- mouse over look and feel here -->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- clicked look and feel here -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</style>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin=".2,.2">
<GradientStop Offset="0.2" Color="White" />
<GradientStop Offset="1" Color="Blue" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Far more simple way is to use Blend. Drag and Drop Ellipse, convert it into control(button). Go to StatesTab adjust the states accordingly. Normally, on pressed state, apply scale trasform to reduce the button size and use translate transform to move the button (appro 2px amount) towards bottom/right would do the trick.
HTH