在WP8的XAML中的用户控件中设置自定义样式按钮的内容

Question

In WP8/XAML/C# I created a user control for a new type of button. I added a dependency property called Text where I want to set the text of the button. This works when I set the button for the first time. Eg for

<ui:JapanButton x:Name="JapanButton1" Text="Japan"></ui:JapanButton>

the text is correctly set to "Japan".

Later, when I click another button I want to change the text of this button in C#. Eg I want to use

JapanButton1.Text = "Not Japan";

However, this does not update the text on the button. So it seems that I did something wrong in the bindings for my user control. Here is my XAML and C# code for that control.

<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:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    x:Class="UI.JapanButton"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="100" d:DesignWidth="480">
    <UserControl.Resources>
        <telerikPrimitives:NegativeConverter x:Key="NegativeConverter"/>
        <Style x:Key="JapanButtoStyle" TargetType="Button">
            <Setter Property="Background" Value="OrangeRed"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Margin="{TemplateBinding Margin}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" Background="{TemplateBinding Background}" CornerRadius="16" BorderBrush="#434045" BorderThickness="2">
                                <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                                    <ContentControl.RenderTransform>
                                        <RotateTransform Angle="{Binding ElementName=RotateTransformButton,Path=Angle,Converter={StaticResource NegativeConverter}}"></RotateTransform>
                                    </ContentControl.RenderTransform>
                                </ContentControl>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button x:Name="ButtonJapan" Style="{StaticResource JapanButtoStyle}" Margin="3" Foreground="WhiteSmoke" Background="#9C2222">

        </Button>
    </Grid>
</UserControl>

C# code behind for the user control

using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace UI
{
    public partial class JapanButton : UserControl
    {
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(JapanButton), null);

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public double FontSize
        {
            get { return (double)GetValue(FontSizeProperty); }
            set { SetValue(FontSizeProperty, value); }
        }

        public JapanButton()
        {
            InitializeComponent();

            Loaded += OnLoaded;
        }

        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
        {
            var bindingTitle = new Binding();
            bindingTitle.Source = Text;
            ButtonJapan.SetBinding(ContentControl.ContentProperty, bindingTitle);

            var bindingFontSize = new Binding();
            bindingFontSize.Source = FontSize;
            ButtonJapan.SetBinding(FontSizeProperty, bindingFontSize);
        }
    }
}

Any help is highly appreciated.

Answer 1

You are not using the NotifyPropertyChanged API to tell the UI that the Text or FontSize properties changed. My recommendation is to actually remove the bindings and just update the control properties manually with a change handler, per:

http://msdn.microsoft.com/en-us/library/ms597502(v=vs.95).aspx

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(JapanButton), new PropertyMetadata(OnTextChanged));

    private static void OnTextChanged(DependencyProperty d, DependencyPropertyChangedEventArgs e)
    {
        (d as JapanButton).ButtonJapan.Content = Text;
    }