When the mouse hover over my ComboBox, I get an awful blue/lightblue pair of color for the backgroung of my ComboBox.
I tried the solutions here :ComboBox Mouse over color, WPF Combobox Mouse Over, How to style ComboBox Background on Mouse Hover? or WPF combobox default hover color on togglebutton, but it doesn't change anything, I still get the default colors while hovering.
Any suggestions ?
Thank you all in advance,
Demasiado.
Here is the XAML code :
<Window x:Class="Homepage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<Window.Resources>
<Storyboard x:Key="TileZoomIn">
<ThicknessAnimation Storyboard.TargetProperty="Margin" From="10" To="1" Duration="0:0:0.1"/>
</Storyboard>
<Storyboard x:Key="TileZoomOut">
<ThicknessAnimation Storyboard.TargetProperty="Margin" From="1" To="10" Duration="0:0:0.1"/>
</Storyboard>
<DropShadowEffect x:Key="DropShadowEffect" BlurRadius="20" Opacity="1" ShadowDepth="0" Color="White"/>
</Window.Resources>
<Grid ShowGridLines="True">
<ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="40,-180,0,256" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
<ComboBox Margin="25" Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
</ComboBox>
</ComboBox>
</Grid>
</Window>
Your problem arises from ButtonChrome in the ToggleButton's template. Remove it from the ToggleButton.
ComboBox -> ToggleButton -> ButtonChrome
Steps :
1) Open Expression Blend and edit a copy of ComboBox's Style , This will give you the Style of the ComboBox + it's Template and all it's TemplateParts , Among them is the problematic ToggleButton.
2) Locate the ToggleButton and it's Style called "ComboBoxReadonlyToggleButton" .
3) In "ComboBoxReadonlyToggleButton" replace the Themes:ButtonChrome with a Border (like shown in the 3'rd block of code below.)
The ComboBox's default template (Simplified !):
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Popup x:Name="PART_Popup">
.....
</Popup>
<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
<ContentPresenter ... />
</Grid>
</ControlTemplate>
The toggle button Style + Template (Simplified !).
<Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Themes:ButtonChrome x:Name="Chrome" ....>
<Grid>
<Path x:Name="Arrow" />
</Grid>
</Themes:ButtonChrome>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What you need to do is to override the default ComboBox template and edit the toggle button's style by replacing ButtonChrome with a Border :
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<Path x:Name="Arrow" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
you can override SystemColors.HighlightBrushKey within the ComboBox scope:
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
the entire XAML can be something like this:
<Grid>
<ComboBox Margin="25" Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
<ComboBox.ItemsSource>
<Binding Path="Collection" Source="{StaticResource viewmodel}"/>
</ComboBox.ItemsSource>
</ComboBox>
</Grid>
A followup to your comment:
ignore the viewmodel and my ItemSource you should use your own, this was just for the demonstration.
as for your comment about
I could not get anything to work
i would suggest that you will create a new project and test only this XAML (with your ItemSource of course) and see if you can get the result you want.
when you will get that, you can move to your real project and see where the styles changes and where is the problem exists.
EDIT#2:
In order to change the color of the ToggleButton i think is best to override the entire ComboBox Style.
i used the
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
The rest of the code and style taken from here.
i would recommend you to read this as well.
There it no item in my ComboBox in the test project. I just hover the mouse over it and the whole control is blue.
Here is the .cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
/// <summary>
/// Logique d'interaction pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
Here is the xaml :
<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">
<Grid>
<ComboBox Name="comboBoxTRIG" FontSize="40" Width="210" Height="98" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="42,38,0,184" Background="Red" BorderBrush="Transparent" Foreground="White" BorderThickness="0">
<ComboBox Width="130" Height="50">
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</ComboBox.Resources>
</ComboBox>
</ComboBox>
</Grid>
</Window>
Redefine your comboxItem Template in your window resources
<Style TargetType="{x:Type ComboBoxItem}"
BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}">
<ContentPresenter Margin="{TemplateBinding Margin}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background"
Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
Related
So I've been trying to override the default style for a slider, but I feel like the way I've been doing it is not correct. For one, I'd like to be able to highlight the track behind the thumb. How do I do this the correct way?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type Slider}}"
TargetType="Slider"
x:Key="SliderTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Border VerticalAlignment="Center"
HorizontalAlignment="Stretch"
Height="5"
Background="White"/>
<Track x:Name="PART_Track">
<Track.Thumb>
<Thumb x:Name="PART_Thumb">
<Thumb.Template>
<ControlTemplate>
<Border Height="20"
Width="20"
Background="#fff"
CornerRadius="15"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
You can change the track's color like this.
Get the default style by right-clicking the Slider and select Edit template then Edit a copy....
Change the color for <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="HotPink"/>
I've customized my projects TextBox via a ResourceDictionary.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Style x:Key="TextBoxTheme" TargetType="{x:Type TextBox}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border CornerRadius="10"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2"
Background="#FF62B6CB">
<Grid>
<TextBox VerticalContentAlignment="Center"
HorizontalContentAlignment="Left"
Padding="5,0,5,0"
Background="Transparent"
BorderThickness="0"
Foreground="#1B4965"
Margin="1"
TextWrapping="Wrap"
FontWeight="Bold"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="TextWrapping" Value="Wrap" />
</Style.Setters>
</Style>
now I'm trying to add the same design to the Passwordbox
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Style x:Key="PasswordBoxTheme" TargetType="{x:Type PasswordBox}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PasswordBox">
<Border CornerRadius="10"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="2"
Background="#FF62B6CB">
<Grid>
<PasswordBox VerticalContentAlignment="Center"
HorizontalContentAlignment="Left"
Padding="5,0,5,0"
Background="Transparent"
BorderThickness="0"
Foreground="#1B4965"
Margin="1"
FontWeight="Bold" />
<!--Password="{Binding RelativeSource= {RelativeSource TemplatedParent}, Path=Password, UpdateSourceTrigger=PropertyChanged}"/-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
The Problem I'm having is that the Password Property of my Passwordbox is empty even though I entered a password. How can I access the Password?
WPF does not bind to the Password proptery of the PasswordBox in fact internally, but always to a DependencyProperty with the name "< nameYouSpecified >Property". If you look at the PasswordBox class there are some DependencyProperties.
For examle:
public static readonly DependencyProperty CaretBrushProperty;
But you will not find a
public static readonly DependencyProperty PasswordProperty;
where WPF could bind to.
Long story short: The Password is not bindable.
This is my XAML so far.
<ScrollViewer Grid.Column="1" Grid.RowSpan="2">
<ListBox Background="Black" ItemsSource="{Binding Path=ActiveLog}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Foreground="White">
<TextBlock >Date:</TextBlock>
<TextBlock Text="{Binding Path=LogDate}"/>
</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Foreground="White">
<TextBlock >Severity:</TextBlock>
<TextBlock Text="{Binding Path=Severity}"/>
</TextBlock>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Foreground="LightGray" Text="{Binding Path=Message}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Template>
<ControlTemplate>
<StackPanel Background="Black" IsItemsHost="True" >
</StackPanel>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</ScrollViewer>
The only problem is that the selected item has a blue box to the right. I assume there is a way to change the selection color, but I can't find it.
<UserControl.Resources>
<Style x:Key="myLBStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</Style.Resources>
</Style>
</UserControl.Resources>
and
<ListBox ItemsSource="{Binding Path=FirstNames}"
ItemContainerStyle="{StaticResource myLBStyle}">
You just override the style of the listboxitem (see the: TargetType is ListBoxItem)
Or you can apply HighlightBrushKey directly to the ListBox. Setter Property="Background" Value="Transparent" did NOT work. But I did have to set the Foreground to Black.
<ListBox ... >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You need to use ListBox.ItemContainerStyle.
ListBox.ItemTemplate specifies how the content of an item should be displayed. But WPF still wraps each item in a ListBoxItem control, which by default gets its Background set to the system highlight colour if it is selected. You can't stop WPF creating the ListBoxItem controls, but you can style them -- in your case, to set the Background to always be Transparent or Black or whatever -- and to do so, you use ItemContainerStyle.
juFo's answer shows one possible implementation, by "hijacking" the system background brush resource within the context of the item style; another, perhaps more idiomatic technique is to use a Setter for the Background property.
I had to set both HighlightBrushKey and ControlBrushKey to get it to be correctly styled. Otherwise, whilst it has focus this will correctly use the transparent HighlightBrusKey. Bt, if the control loses focus (whilst it is still highlighted) then it uses the ControlBrushKey.
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Style.Resources>
When Using .Net 4.5 and above, use InactiveSelectionHighlightBrushKey instead of ControlBrushKey:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
</Style.Resources>
Hope this helps someone out.
I've tried various solutions and none worked for me, after some more research I've found a solution that worked for me here
https://gist.github.com/LGM-AdrianHum/c8cb125bc493c1ccac99b4098c7eeb60
<Style x:Key="_ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox ItemContainerStyle="{DynamicResource _ListBoxItemStyle}"
Width="200" Height="250"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>Hi</ListBoxItem>
</ListBox>
I posted it here, as this is the first google result for this problem so some others may find it useful.
You have to create a new template for item selection like this.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ContentPresenter
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
If selection is not important, it is better to use an ItemsControl wrapped in a ScrollViewer. This combination is more light-weight than the Listbox (which actually is derived from ItemsControl already) and using it would eliminate the need to use a cheap hack to override behavior that is already absent from the ItemsControl.
In cases where the selection behavior IS actually important, then this obviously will not work. However, if you want to change the color of the Selected Item Background in such a way that it is not visible to the user, then that would only serve to confuse them. In cases where your intention is to change some other characteristic to indicate that the item is selected, then some of the other answers to this question may still be more relevant.
Here is a skeleton of how the markup should look:
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have got the problem with FocusVisualStyle, I need to override TAB keyboard focus style, when i'm override Window.Template all controls styles FocusVisualStyle on the window stops working.
The problem XAML (Tab style doesn't work):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Style>
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Style>
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
Without Window.Style FocusVisualStyle works well (Tab style works):
<Window
x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="450">
<Window.Resources>
<Style x:Key="ButtonTabFocused" TargetType="Control">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-3" StrokeThickness="3" Stroke="Red" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="White">
<Button
Width="100"
Height="40"
Content="MyButton"
FocusVisualStyle="{StaticResource ButtonTabFocused}" />
</Grid>
</Window>
No msdn information founded. Could you please tell me any workarounds or am i missed something what's makes this behavior.
My environments:
.NET Framework 4.7.2 (same for older versions)
Windows 10 19042.685
Visual Studio 2019
Thanks.
UPDATE, working style below, thanks to arxont:
<Style TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to add AdornerDecorator. Change your window style:
<AdornerDecorator>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</AdornerDecorator>
Is there any examples of the animated tab control (one in android mentioned below) in WPF? Any tab/button controls that animate to down-arrow when pressed?
This one is for android:
Setting selected TAB with a small triangle below it
What is keeping you from doing like this
<Application.Resources>
<ControlTemplate x:Key="ButtonTemplate1"
TargetType="{x:Type Button}">
<Border
Name="Border"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="2"
Background="#FF2278CF"
TextBlock.Foreground="White">
<Grid>
<ContentPresenter
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalAlignment="Center">
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="ButtonTemplate2"
TargetType="{x:Type Button}">
<Border
Name="Border"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="50"
Background="Red"
TextBlock.Foreground="White">
<Grid>
<ContentPresenter
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalAlignment="Center">
</ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Control.Template" Value="{StaticResource ButtonTemplate1}"></Setter>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="true">
<Setter Property="Control.Template" Value="{StaticResource ButtonTemplate2}"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
In ControlTemplate you can make your control any form you want.
Perhaps you should use triggers.
Trigger Class
Styles using triggers in WPF
I was able to do this is blend. This is able to animate itself, the storyboard is triggered on click of the button. This is not the perfect answer, but it gives the idea.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
mc:Ignorable="d"
x:Class="SilverlightPrototype1Screens.Screen_1"
Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Callout.AnchorPoint)" Storyboard.TargetName="callout">
<EasingPointKeyFrame KeyTime="0" Value="0.254,0.962"/>
<EasingPointKeyFrame KeyTime="0:0:2" Value="0.269,1.385"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ed:Callout x:Name="callout" AnchorPoint="0.277,1.593" CalloutStyle="RoundedRectangle" Fill="#FF737393" FontSize="14.666999816894531" HorizontalAlignment="Left" Height="52" Margin="150,88,0,0" Stroke="Black" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5"/>
</Grid></UserControl>