Update Silverlight UserControl via XAML

Question

Update Silverlight UserControl via XAML

I am using the latest version of Silverlight 2.0 in Visual Studio 2008. I have a simple Silverlight UserControl with the following code:

public partial class SilverlightControl1 : UserControl
{
    public SilverlightControl1()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(SilverlightControl1_Loaded);
        Composite = new Composite();
    }

    void SilverlightControl1_Loaded(object sender, RoutedEventArgs e)
    {
        Composite.Width = this.Width / 2.0;
        Composite.Height = this.Height / 2.0;
        if (!this.LayoutRoot.Children.Contains(Composite)) 
            this.LayoutRoot.Children.Add(Composite);
    }

    public Composite Composite
    {
        get;
        set;
    }
}

public class Composite : ContentControl
{
    private Grid grid;
    private Canvas canvas;

    public Composite()
    {
        if (grid == null) grid = new Grid();
        if (canvas == null) canvas = new Canvas();
        if (!grid.Children.Contains(canvas)) 
            grid.Children.Add(canvas);
        Content = grid;
        this.Loaded += new RoutedEventHandler(Composite_Loaded);
    }

    private Rectangle rectangle;

    void Composite_Loaded(object sender, RoutedEventArgs e)
    {
        if (rectangle == null) rectangle = new Rectangle();
        Canvas.SetTop(rectangle, 0);
        Canvas.SetLeft(rectangle, 0);
        rectangle.Fill = new SolidColorBrush(Color);
        rectangle.Width = Width;
        rectangle.Height = Height;
        if (!canvas.Children.Contains(rectangle)) 
            canvas.Children.Add(rectangle);
    }

    public Color Color
    {
        get;
        set;
    }
}

Then I use this UserControl in a Silverlight application, the XAML on the page looks like this:

<UserControl x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:test="clr-namespace:SilverlightClassLibrary1;assembly=SilverlightClassLibrary1"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Green">
    <test:SilverlightControl1 Name="uControl1">
      <test:SilverlightControl1.Composite>
        <test:Composite Color="Yellow"/>
      </test:SilverlightControl1.Composite>
    </test:SilverlightControl1>
    </Grid>
</UserControl>

My question is, what code should I add to the above so that by changing the Composite Color to something other than Yellow and hitting the back button, the UserControl is automatically refreshed? As code, the only way to update the UserControl is to move the slider bar in VS2008, which changes the percentage scaling of the Silverlight page. Another question, although less relevant to the above question, is this: with code like it above, why can't I change the "LayoutRoot" background color? If I remove my UserControl it works as expected.

0

refresh silverlight xaml silverlight-2.0

Shunyata Kharg May 26 '09 at 14:05

a source to share

2 answers

I think you need to make Composite into Proprety dependency. You probably want to do the same for the Color on Composite so you can tie it.

0

Jeffrey Lott May 26 '09 at 14:20

a source to share

Shunyata Kharg · Accepted Answer · 2009-05-29T09:10:50+0000

The solution was twofold. First, to make the changes to the LayoutUpdated event, not the Loaded event, and second, to subscribe to the PropertyChangedCallback PropertyMetadata. Here's the complete working code:

  public partial class SilverlightControl1 : UserControl
  {
    public SilverlightControl1()
    {
      InitializeComponent();
      this.LayoutUpdated += new EventHandler(SilverlightControl1_LayoutUpdated);
      Composite = new Composite();
    }

    void SilverlightControl1_LayoutUpdated(object sender, EventArgs e)
    {
      Composite.Width = this.Width / 2.0;
      Composite.Height = this.Height / 2.0;
      if (!this.LayoutRoot.Children.Contains(Composite)) this.LayoutRoot.Children.Add(Composite);
    }

    public Composite Composite
    {
      get;
      set;
    }
  }

  public class Composite : ContentControl
  {
    private Grid grid;
    private Canvas canvas;

    public Composite()
    {
      if (grid == null) grid = new Grid();
      if (canvas == null) canvas = new Canvas();
      if (!grid.Children.Contains(canvas)) grid.Children.Add(canvas);
      Content = grid;
      this.LayoutUpdated += new EventHandler(Composite_LayoutUpdated);
    }

    void Composite_LayoutUpdated(object sender, EventArgs e)
    {
      if (rectangle == null) rectangle = new Rectangle();
      Canvas.SetTop(rectangle, 0);
      Canvas.SetLeft(rectangle, 0);
      rectangle.Fill = new SolidColorBrush(Color);

      rectangle.Width = Width;
      rectangle.Height = Height;
      if (!canvas.Children.Contains(rectangle)) canvas.Children.Add(rectangle);
    }

    public static readonly DependencyProperty ColorProperty = DependencyProperty.Register("Color", typeof(Color), typeof(Composite), new PropertyMetadata(Colors.Red, new PropertyChangedCallback(OnColorPropertyChanged)));

    private static void OnColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      Composite comp = (Composite)d;
      comp.InvalidateArrange();
    }

    private Rectangle rectangle;

    public Color Color
    {
      get { return (Color)GetValue(ColorProperty); }
      set { SetValue(ColorProperty, value); }
    }
  }

Update Silverlight UserControl via XAML

More articles: