We Keep Coding

c# uwp tooltip placement property not updating

In C# UWP I am creating custom tooltip style.
I have changed the default style of tooltip as below.
<Style TargetType="ToolTip">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}" />
<Setter Property="FontSize" Value="{ThemeResource ToolTipContentThemeFontSize}" />
<Setter Property="Padding" Value="40,40,40,35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid Background="Transparent">
<Grid
MinWidth="100"
MinHeight="90"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Padding="15"
Background="Transparent">
<local:ArrowDown x:Name="arrowDown" TooltipPlacement="{TemplateBinding Placement}"/>
And my custom control ArrowDown is getting information of ToolTip placement, so I can show it depends if tooltip is under or above control.
In the ArrowDown control I have added a DependencyProperty as below:
public PlacementMode TooltipPlacement
{
get { return (PlacementMode)GetValue(TooltipPlacementProperty); }
set { SetValue(TooltipPlacementProperty, value); }
}
public static readonly DependencyProperty TooltipPlacementProperty =
DependencyProperty.Register("TooltipPlacement", typeof(PlacementMode), typeof(ArrowDown), new PropertyMetadata(null, TooltipPlacementChangedCallback));
private static void TooltipPlacementChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var self = (ArrowDown)d;
self.CalculateArrowVisibility();
}
// Method to show or hide arrow
private void CalculateArrowVisibility()
{
}
And the problem is that the CalculateArrowVisibility is fire only the first time when tooltip is shown, and it always returns Top for TooltipPlacement, no matter if tooltip is shown below or above control.
I need CalculateArrowVisibility to be fired whenever the tooltip is shown, and I need TooltipPlacement property to show if tooltip is Under or Above control.
Anyone have the idea about this?

The fact is that you cannot use the ToolTipService attached properties (e.g. <Button ToolTipService.Placement="Bottom" ToolTipService.ToolTip="!!!" />) to define the tooltip and it placement. This way the Placement is not set on the actual ToolTip control itself, and that's why it will always return Top.
In order to have the ToolTip pass down its Placement value to your custom dependency property, you will have to attach it like the following -
<Button>
<ToolTipService.ToolTip>
<ToolTip Placement="Bottom" Content="Hahaha..." />
</ToolTipService.ToolTip>
</Button>
Update
Turns out that even though the app Window pushes the tooltip above or below its parent, its Placement value is never changed, what's changed is its horizontal & vertical offsets.
So, in your case, if we could work out its exact vertical offset, we would be able to determine whether the tooltip is above or below (its parent).
Given we have a ToolTip Style in place, we can create an attached property of type ToolTip and attach it to the Grid that contains the ArrowDown control.
<Grid MinWidth="100"
MinHeight="90"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Padding="15"
Background="Transparent"
local:ToolTipHelper.ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}}">
Because the TemplatedParent of the Grid is the ToolTip, we can use RelativeSource binding to link the ToolTip on the screen with our attached property, as shown above.
Now, we have a reference to the actual ToolTip, let's find its offsets. After some digging, I've found that the offsets of the ToolTip are always 0, they are useless; however, the offsets of its parent - a Popup, sometimes gives me the correct values, but not always. This is because I was using the Opened event where those values weren't yet populated; as soon as I changed it to SizeChanged, they have been giving me the expected values.
public static class ToolTipHelper
{
public static ToolTip GetToolTip(DependencyObject obj)
{
return (ToolTip)obj.GetValue(ToolTipProperty);
}
public static void SetToolTip(DependencyObject obj, ToolTip value)
{
obj.SetValue(ToolTipProperty, value);
}
public static readonly DependencyProperty ToolTipProperty =
DependencyProperty.RegisterAttached("ToolTip", typeof(ToolTip), typeof(ToolTipHelper),
new PropertyMetadata(null, (s, e) =>
{
var panel = (Panel)s; // The Grid that contains the ArrowDown control.
var toolTip = (ToolTip)e.NewValue;
// We need to monitor SizeChanged instead of Opened 'cause the offsets
// are yet to be properly set in the latter event.
toolTip.SizeChanged += (sender, args) =>
{
var popup = (Popup)toolTip.Parent; // The Popup that contains the ToolTip.
// Note we have to use the Popup's offset here as the ToolTip's are always 0.
var arrowDown = (ArrowDown)panel.FindName("arrowDown");
arrowDown.TooltipPlacement = popup.VerticalOffset > 0
? PlacementMode.Bottom
: PlacementMode.Top;
};
}));
}
Now, with this approach, you should be able to use the ToolTipService attached properties too. So the following XAML would work.
<Button ToolTipService.ToolTip="!!!" Content="Hover Me" />
Hope this helps!

WPF binding dynamically created RadioButtons from code

I have stackpanel to which I am adding RadioButtons dynamically as children.
Radiobuttons have content which is integer.
I also have Y x Y grid (size determined from code dynamically), to which I'm adding dynamically Buttons and allow user to change Button's content into string which represents integer number.
Here is where I need help:
After checking arbitrary radiobutton from stackpanel, I'd like all buttons from grid that have same number to have their background color changed.
As I am new to WPF I am not sure how to achieve this and your help would be greatly appreciated.
EDIT:
I made a little progress, what I do is basically bind Button.Content with RadioButton.IsChecked and RadioButton.Content for everybutton and every radiobutton, but I have problem that it only works for last radiobutton here is code (rbuts=parent control of radiobuttons, MyGrid=parent control of buttons):
for (int z = 0; z < boardSize * boardSize; z++)
{
Button b1 = MyGrid.Children[z] as Button;
for (int i = 0; i < boardSize; i++)
{
MultiBinding rbtnBinding = new MultiBinding();
rbtnBinding.Converter = new RadioButtonHighlightConverter();
rbtnBinding.Bindings.Add(new Binding("IsChecked") { Source = rbuts.Children[i] });
rbtnBinding.Bindings.Add(new Binding("Content") { Source = rbuts.Children[i] });
rbtnBinding.Bindings.Add(new Binding("Content") { Source = MyGrid.Children[z] });
rbtnBinding.NotifyOnSourceUpdated = true;
b1.SetBinding(Button.BackgroundProperty, rbtnBinding);
}
}
Its as if I cannot set many different multibindings for same button...

You could place your Button Styles in a Resource Dictionary and bind the Style for the Button and use a Converter
ButtonStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Green"/>
<Setter Property="FontSize" Value="12"/>
</Style>
<Style x:Key="ButtonStyle2" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="FontSize" Value="14"/>
</Style>
</ResourceDictionary>
Then for the Button that has this requirement you bind Style to the property of interest
<Button ...
Style="{Binding Path=MyDataProperty,
Converter={StaticResource ButtonStyleConverter}}"/>
And in the Converter you load the ButtonStyles Resource Dictionary and return the desired Style based on the value
public class ButtonStyleConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
Uri resourceLocater = new Uri("/YourNameSpace;component/ButtonStyles.xaml", System.UriKind.Relative);
ResourceDictionary resourceDictionary = (ResourceDictionary)Application.LoadComponent(resourceLocater);
if (value.ToString() == "Some Value")
{
return resourceDictionary["ButtonStyle1"] as Style;
}
return resourceDictionary["ButtonStyle2"] as Style;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
EDIT :
Added details for converter parameter
<RadioButton Content="None"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
<RadioButton.IsChecked>
<Binding Path="MyProperty"
Converter="{StaticResource IntToBoolConverter}">
<Binding.ConverterParameter>
<sys:Int32>0</sys:Int32>
</Binding.ConverterParameter>
</Binding>
</RadioButton.IsChecked>
</RadioButton>

TextBlock Style to always use Run Tag

In WPF Arabic Mode (FlowDirection="RightToLeft").
When i give a number like -24.7% it will print this as %24.7-
Following code will fix the above mentioned issues.
<Window.Resources>
<Style TargetType="Run">
<Setter Property="FlowDirection" Value="LeftToRight" />
</Style>
</Window.Resources>
<Grid FlowDirection="RightToLeft" >
<Grid HorizontalAlignment="Left" Margin="114,127,0,0" VerticalAlignment="Top" Width="279" Height="97">
<TextBlock x:Name="textBlock" Text="-24.7%" ><Run></Run></TextBlock>
</Grid>
</Grid>
Now i want to put the <run><run> tag to all of my Text Blocks Contents, How can i achieve this, So i don't have to replace all of my TextBlocks in the code.
How to do this by creating a Style...??
note: I can't go to the TextAlign=Right solution as i can't edit all the textblockes in the application

Can't say I like your approach, but I don't know Arabic gotchas and your situation, so won't argue about that. You can achieve what you want using attached properties (or blend behaviors). Like this:
public static class StrangeAttachedProperty {
public static bool GetAddRunByDefault(DependencyObject obj) {
return (bool) obj.GetValue(AddRunByDefaultProperty);
}
public static void SetAddRunByDefault(DependencyObject obj, bool value) {
obj.SetValue(AddRunByDefaultProperty, value);
}
public static readonly DependencyProperty AddRunByDefaultProperty =
DependencyProperty.RegisterAttached("AddRunByDefault", typeof (bool), typeof (StrangeAttachedProperty), new PropertyMetadata(AddRunByDefaultChanged));
private static void AddRunByDefaultChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
var element = d as TextBlock;
if (element != null) {
// here is the main point - you can do whatever with your textblock here
// for example you can check some conditions and not add runs in some cases
element.Inlines.Add(new Run());
}
}
}
And in your resources set this property for all text blocks:
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="local:StrangeAttachedProperty.AddRunByDefault" Value="True" />
</Style>
<Style TargetType="Run">
<Setter Property="FlowDirection" Value="LeftToRight" />
</Style>
</Window.Resources>

C# WPF - How to Combine datatrigger and trigger?

I don't know if need to combine DataTrigger & Trigger, if there's better way please tell me.
My goal is, to create a menu(with icons), icons will change while meet hover or selected event.
Here's an enum define all menu types:
public enum PageTypes:byte
{
NotSet = 0,
HomePage = 1,
ShopPage = 2,
AboutPage = 3
}
Then I created a MenuItemModel represent each menu item:
public class MenuItemModel : INotifyPropertyChanged
{
private PageTypes _menuItemType = PageTypes.NotSet;
public PageTypes MenuItemType { get { return _menuItemType; } set { if (value != _menuItemType) { _menuItemType = value; RaisePropertyChanged(() => MenuItemType); } } }
private bool _isSelected = false;
public bool IsSelected { get { return _isSelected; } set { if (value != _isSelected) { _isSelected = value; RaisePropertyChanged(() => IsSelected); } } }
}
Ok, then I begin to create UI.
<!-- MenuItem Template -->
<DataTemplate x:Key="MenuTemplate">
<Button Command="{Binding ClickCommand}" CommandParameter="{Binding}">
<Image>
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Home_normal.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MenuItemType}" Value="ShopPage">
<Setter Property="Source" Value="/Image/Shop_normal.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding MenuItemType}" Value="AboutPage">
<Setter Property="Source" Value="/Image/About_normal.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
</DataTemplate>
till now everything is very easy, but when I try to make mouseOver and Selected effect, problem comes.
for example, if mouse over home_normal.png, it should change to home_hover.png, if IsSelected property is TRUE, image should be ignore hover trigger then use home_selected.png. But there's 3 image, how do I know what image should change?
<!-- MenuItem Template -->
<DataTemplate x:Key="MenuTemplate">
<Button Command="{Binding ClickCommand}" CommandParameter="{Binding}">
<Image>
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Home_normal.png"/>
<Style.Triggers>
<DataTrigger Binding="{Binding MenuItemType}" Value="ShopPage">
<Setter Property="Source" Value="/Image/Shop_normal.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding MenuItemType}" Value="AboutPage">
<Setter Property="Source" Value="/Image/About_normal.png"/>
</DataTrigger>
<!-- MY PLAN -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="?_hover.png"/>
</Trigger>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Source" Value="?_selected.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>
</DataTemplate>
If you can see the question mark in "MY PLAN" comment, that would be my question: what should I do in the Value field?

You can use MultiDataTrigger like this. But you should add same 3 triggers for all types of pages. Note that next trigger overrides below and conditions works like logical AND.
<p:Style.Triggers xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<DataTrigger Binding="{Binding MenuItemType}" Value="ShopPage">
<Setter Property="Source" Value="/Image/Shop_normal.png"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding MenuItemType}" Value="ShopPage" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Source" Value="/Image/Shop_MouseOver.png" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding MenuItemType}" Value="ShopPage" />
<Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsSelected}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Source" Value="/Image/Shop_IsSelected.png" />
</MultiDataTrigger>
</p:Style.Triggers>

In my opinion, the answer you've already received and accepted is a good one. It's entirely XAML-based, which seems to be a primary goal in your scenario, and it should work very well. That said, the XAML-only solution is fairly verbose and involves a lot of redundant code. This is already seen in the scenario above where you have two buttons types, each with three possible states. And it will only get worse as you add button types and states.
If you are willing to do a little code-behind, I think you can accomplish the same effect but with a lot less redundancy.
Specifically, if you use <MultiBinding>, you can bind the relevant properties to a collection that can be used to look up the correct image source. In order for me to accomplish this, I needed to create a couple of small container types to store the lookup data, and of course the IMultiValueConverter implementation to use them:
Container types:
[ContentProperty("Elements")]
class BitmapImageArray
{
private readonly List<ButtonImageStates> _elements = new List<ButtonImageStates>();
public List<ButtonImageStates> Elements
{
get { return _elements; }
}
}
class ButtonImageStates
{
public string Key { get; set; }
public BitmapImage[] StateImages { get; set; }
}
Converter:
class OrderedFlagConverter : IMultiValueConverter
{
public object Convert(object[] values,
Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
BitmapImageArray imageData = (BitmapImageArray)parameter;
string type = (string)values[0];
foreach (ButtonImageStates buttonStates in imageData.Elements)
{
if (buttonStates.Key == type)
{
int index = 1;
while (index < values.Length)
{
if ((bool)values[index])
{
break;
}
index++;
}
return buttonStates.StateImages[index - 1];
}
}
return DependencyProperty.UnsetValue;
}
public object[] ConvertBack(object value,
Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
In your example, using the above might look something like this:
<DataTemplate x:Key="MenuTemplate">
<Button Command="{Binding ClickCommand}" CommandParameter="{Binding}">
<Image>
<Image.Source>
<MultiBinding>
<MultiBinding.Converter>
<l:OrderedFlagConverter/>
</MultiBinding.Converter>
<MultiBinding.ConverterParameter>
<l:BitmapImageArray>
<l:ButtonImageStates Key="ShopPage">
<l:ButtonImageStates.StateImages>
<x:Array Type="{x:Type BitmapImage}">
<BitmapImage UriSource="/Image/Shop_selected.png"/>
<BitmapImage UriSource="/Image/Shop_hover.png"/>
<BitmapImage UriSource="/Image/Shop_normal.png"/>
</x:Array>
</l:ButtonImageStates.StateImages>
</l:ButtonImageStates>
<l:ButtonImageStates Key="AboutPage">
<l:ButtonImageStates.StateImages>
<x:Array Type="{x:Type BitmapImage}">
<BitmapImage UriSource="/Image/About_selected.png"/>
<BitmapImage UriSource="/Image/About_hover.png"/>
<BitmapImage UriSource="/Image/About_normal.png"/>
</x:Array>
</l:ButtonImageStates.StateImages>
</l:ButtonImageStates>
</l:BitmapImageArray>
</MultiBinding.ConverterParameter>
<Binding Path="ButtonType"/>
<Binding Path="IsMouseOver" RelativeSource="{RelativeSource Self}"/>
<Binding Path="IsSelected"/>
</MultiBinding>
</Image.Source>
</Image>
</Button>
</DataTemplate>
The converter takes, as input, bindings to the properties that affect the visual state of the button. The first bound value is simply the type of the button; this is used to look up the correct array of button states for the button. The remaining bound values (you can have arbitrarily many in this approach) are flags that are searched; the images are stored in the same order as the flags, with one additional "default" image at the end (i.e. if no flags are set, the default image is returned).
In this way, adding new button types involves only adding a new ButtonImageStates object, specifying the correct key for that button type, and adding new button states involves only adding a single line to each button type's list: the BitmapImage reference that corresponds to the image for that state for that button type.
Doing it this way drastically cuts down on the amount of code one has to add as new button types and states are needed: a given button type need be mentioned in the XAML only once, and likewise each triggering property is mentioned only once. A XAML-only approach will require a lot of duplicated boilerplate, and the actual image file references will be scattered throughout the style declaration.
Here is a simple demo of the basic technique. Lacking a good MCVE to start with, I didn't want to waste time re-creating parts of the code that weren't strictly necessary for the purposes of a demonstration:
I only bothered to create four state images, and of course only wrote code to deal with four possible states: two each for two different button types.
I also didn't bother with putting this in a menu; I'm just using a plain ItemsControl to present the buttons.
Naturally, the view model is a degenerate class; I didn't bother with property-change notification, since it's not needed here. The example still works if you include that though.
Here are the images used in the example (I'm a programmer, not an artist…I considered not even bothering with image content, since that's also not strictly required to demonstrate the basic technique, but figured I could handle four basic images :) ):
These are added to the project in a "Resources" folder, with the Build Action set to Resource.
XAML:
<Window x:Class="TestSO34193266MultiTriggerBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="clr-namespace:TestSO34193266MultiTriggerBinding"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<l:OrderedFlagConverter x:Key="orderedFlagConverter1"/>
<BitmapImage x:Key="bitmapRedNormal"
UriSource="pack://application:,,,/Resources/red_normal.png"/>
<BitmapImage x:Key="bitmapRedHover"
UriSource="pack://application:,,,/Resources/red_hover.png"/>
<BitmapImage x:Key="bitmapGreenNormal"
UriSource="pack://application:,,,/Resources/green_normal.png"/>
<BitmapImage x:Key="bitmapGreenHover"
UriSource="pack://application:,,,/Resources/green_hover.png"/>
<l:ViewModel x:Key="redViewModel" ButtonType="Red"/>
<l:ViewModel x:Key="greenViewModel" ButtonType="Green"/>
<x:Array x:Key="items" Type="{x:Type l:ViewModel}">
<StaticResource ResourceKey="redViewModel"/>
<StaticResource ResourceKey="greenViewModel"/>
</x:Array>
<x:Array x:Key="redButtonStates" Type="{x:Type BitmapImage}">
<StaticResource ResourceKey="bitmapRedHover"/>
<StaticResource ResourceKey="bitmapRedNormal"/>
</x:Array>
<x:Array x:Key="greenButtonStates" Type="{x:Type BitmapImage}">
<StaticResource ResourceKey="bitmapGreenHover"/>
<StaticResource ResourceKey="bitmapGreenNormal"/>
</x:Array>
<l:BitmapImageArray x:Key="allButtonStates">
<l:ButtonImageStates Key="Red" StateImages="{StaticResource redButtonStates}"/>
<l:ButtonImageStates Key="Green" StateImages="{StaticResource greenButtonStates}"/>
</l:BitmapImageArray>
<ItemsPanelTemplate x:Key="panelTemplate">
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
<DataTemplate x:Key="template" DataType="l:ViewModel">
<Button>
<Image Stretch="None">
<Image.Source>
<MultiBinding Converter="{StaticResource orderedFlagConverter1}"
ConverterParameter="{StaticResource allButtonStates}">
<Binding Path="ButtonType"/>
<Binding Path="IsMouseOver" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Image.Source>
</Image>
</Button>
</DataTemplate>
<!-- explicit namespace only for the benefit of Stack Overflow formatting -->
<p:Style TargetType="ItemsControl"
xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Setter Property="ItemsSource" Value="{StaticResource items}"/>
<Setter Property="ItemsPanel" Value="{StaticResource panelTemplate}"/>
</p:Style>
</Window.Resources>
<StackPanel>
<ItemsControl ItemTemplate="{StaticResource template}"/>
</StackPanel>
</Window>
C#:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
class ViewModel
{
public string ButtonType { get; set; }
}
class OrderedFlagConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
BitmapImageArray imageData = (BitmapImageArray)parameter;
string type = (string)values[0];
foreach (ButtonImageStates buttonStates in imageData.Elements)
{
if (buttonStates.Key == type)
{
int index = 1;
while (index < values.Length)
{
if ((bool)values[index])
{
break;
}
index++;
}
return buttonStates.StateImages[index - 1];
}
}
return DependencyProperty.UnsetValue;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
[ContentProperty("Elements")]
class BitmapImageArray
{
private readonly List<ButtonImageStates> _elements = new List<ButtonImageStates>();
public List<ButtonImageStates> Elements
{
get { return _elements; }
}
}
class ButtonImageStates
{
public string Key { get; set; }
public BitmapImage[] StateImages { get; set; }
}
One minor note: for some reason I get in the XAML editor the following error message on the <Window> element declaration:
Collection property 'TestSO34193266MultiTriggerBinding.ButtonImageStates'.'StateImages' is null.
I've clearly failed to jump through some hoop the XAML editor wants me to clear with respect to the declaration and/or implementation of ButtonImageStates, but what that is I don't know. The code compiles and runs just fine, so I haven't bothered to try to figure that part out. It may well be the case that there's a better way to represent the map of button state images, but this way works and other than the spurious error seems fine to me.

Silverlight with using of DependencyProperty and ControlTemplate

I'm starting to study Silverlight 3 and Visual Studio 2008. I've been trying to create Windows sidebar gadget with button controls that look like circles (I have couple of "roundish" png images). The behavior, I want, is the following: when the mouse hovers over the image it gets larger a bit. When we click on it, then it goes down and up. When we leave the button's image it becomes normal sized again.
Cause I'm going to have couple of such controls I decided to implement custom control: like a button but with image and no content text.
My problem is that I'm not able to set my custom properties in my template and style.
What am I doing wrong?
My teamplate control with three additional properties:
namespace SilverlightGadgetDocked {
public class ActionButton : Button {
/// <summary>
/// Gets or sets the image source of the button.
/// </summary>
public String ImageSource {
get { return (String)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
/// <summary>
/// Gets or sets the ratio that is applied to the button's size
/// when the mouse control is over the control.
/// </summary>
public Double ActiveRatio {
get { return (Double)GetValue(ActiveRatioProperty); }
set { SetValue(ActiveRatioProperty, value); }
}
/// <summary>
/// Gets or sets the offset - the amount of pixels the button
/// is shifted when the the mouse control is over the control.
/// </summary>
public Double ActiveOffset {
get { return (Double)GetValue(ActiveOffsetProperty); }
set { SetValue(ActiveOffsetProperty, value); }
}
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource",
typeof(String),
typeof(ActionButton),
new PropertyMetadata(String.Empty));
public static readonly DependencyProperty ActiveRatioProperty =
DependencyProperty.Register("ActiveRatio",
typeof(Double),
typeof(ActionButton),
new PropertyMetadata(1.0));
public static readonly DependencyProperty ActiveOffsetProperty =
DependencyProperty.Register("ActiveOffset",
typeof(Double),
typeof(ActionButton),
new PropertyMetadata(0));
public ActionButton() {
this.DefaultStyleKey = typeof(ActionButton);
}
}
}
And XAML with styles:
<UserControl x:Class="SilverlightGadgetDocked.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:SilverlightGadgetDocked="clr-namespace:SilverlightGadgetDocked"
Width="130" Height="150" SizeChanged="UserControl_SizeChanged" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave">
<Canvas>
<Canvas.Resources>
<Style x:Name="ActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SilverlightGadgetDocked:ActionButton">
<Grid>
<Image Source="{TemplateBinding ImageSource}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DockedActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource ActionButtonStyle}">
<Setter Property="Canvas.ZIndex" Value="2"/>
<Setter Property="Canvas.Top" Value="10"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="30"/>
<Setter Property="ActiveRatio" Value="1.15"/>
<Setter Property="ActiveOffset" Value="5"/>
</Style>
<Style x:Key="InfoActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_info.png"/>
</Style>
<Style x:Key="ReadActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_read.png"/>
</Style>
<Style x:Key="WriteActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_write.png"/>
</Style>
</Canvas.Resources>
<StackPanel>
<Image Source="images/background_docked.png" Stretch="None"/>
<TextBlock Foreground="White" MaxWidth="130" HorizontalAlignment="Right" VerticalAlignment="Top" Padding="0,0,5,0" Text="Name" FontSize="13"/>
</StackPanel>
<SilverlightGadgetDocked:ActionButton Canvas.Left="15" Style="{StaticResource InfoActionButtonStyle}" MouseLeftButtonDown="imgActionInfo_MouseLeftButtonDown"/>
<SilverlightGadgetDocked:ActionButton Canvas.Left="45" Style="{StaticResource ReadActionButtonStyle}" MouseLeftButtonDown="imgActionRead_MouseLeftButtonDown"/>
<SilverlightGadgetDocked:ActionButton Canvas.Left="75" Style="{StaticResource WriteAtionButtonStyle}" MouseLeftButtonDown="imgActionWrite_MouseLeftButtonDown"/>
</Canvas>
</UserControl>
And Visual Studio reports that "Invalid attribute value ActiveRatio for property Property" in line 27
<Setter Property="ActiveRatio" Value="1.15"/>
VERY BIG THANKS!!!

To be honest I can't see anything wrong with the code you've posted. Perhaps an explanation of exactly what causes the error you are seeing might give you some clues you can use.
The registration of the Dependancy property is what is important here:-
public static readonly DependencyProperty ActiveRatioProperty =
DependencyProperty.Register("ActiveRatio",
typeof(Double),
typeof(ActionButton),
new PropertyMetadata(1.0));
This creates and registers an instance of a dependency property against the combination of the string "ActiveRatio" and the Type ActionButton. When Silverlight comes to put the following Xaml into action:-
<Style x:Key="Stuff" TargetType="local:ActionButton">
<Setter Property="ActiveRatio" Value="1.15" />
</Style>
it combines the type specified in the TargetType attribute of the style with the string in the setters Property attribute to find the dependancy property instance. * It can then use the type indicated by the dependency property to convert the string in the setters Value attribute. Finally it can call SetValue on the FrameworkElement on which the style is set passing the DependencyProperty found and the converted value.
Now return the * in the previous paragraph. Its at this point that the code has failed. It is failing to find a dependency property registration for the string "ActiveRatio" and the type ActionButton.
I can't tell you why its failing, your code clearly registers this name and the type in the style matches the type passed in the registration. I've even written small repro of your code and it works fine.
All I can suggest is that you try a complete Rebuild and then run the code.
Assuming what you have posted is fairly complete the only other suggestion I have is such a "clutching at straws" exercise I'm not even going to explain my reason. Try adding this to you ActionButton class:-
public static ActionButton() { }