Silverlight border from images

Question

I would like to make generic control, that will have nice border and inside content presenter (this will be: left top corner border-left-top )

That is a way I've chosen to do it, given the fact there is no tiled image brush. I've predefined tiles (10 is enough for all scenarios in my application). It works, however I have to specify width/height for this border control explicitly, as the predefined tiles are enlarging the grid. Is there a way how to make it resize automatically according to width/height of content, or some different more elegant way ?

<sfc:UserControlEx x:Class="Barbar.D20.SilverClient.Views.Controls.UI.Border"
    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:sfc="clr-namespace:Barbar.SilverFramework.Controls;assembly=Barbar.SilverFramework"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid>
        <Image Source="/Images/Border/border-left-top.png" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" />
        <Image Source="/Images/Border/border-right-top.png" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Top" />
        <Image Source="/Images/Border/border-left-bottom.png" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
        <Image Source="/Images/Border/border-right-bottom.png" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="25,0,25,0" Orientation="Horizontal">
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
            <Image Source="/Images/Border/border-top.png" Stretch="None" />
        </StackPanel>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,25,0,25" Orientation="Vertical">
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
            <Image Source="/Images/Border/border-left.png" Stretch="None" />
        </StackPanel>
        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,25,0,25" Orientation="Vertical">
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
            <Image Source="/Images/Border/border-right.png" Stretch="None" />
        </StackPanel>    
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="25,0,25,0" Orientation="Horizontal">
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
        </StackPanel>

        <ContentPresenter x:Name="contentPresenter" Margin="25,25,25,25" Width="Auto" Height="Auto" />
    </Grid>
</sfc:UserControlEx>


using System.Windows.Markup;
using Barbar.SilverFramework.Controls;
[ContentProperty("UserContent")]
public partial class Border : UserControlEx {
  public Border() {
    InitializeComponent();
  }

  public object UserContent {
    get { return contentPresenter.Content; }
    set { contentPresenter.Content = value; }
  }
}

EDIT: I ended up with this solution (creating my own StackPanel that "hides" resulting size), also I moved from UserControl to ContentControl due to referencing x:Name="" items inside content control; still if anyone knows more elegant way, I would like to know:

using System;
using System.Windows;
using System.Windows.Controls;
namespace Barbar.SilverFramework.Controls {
  public class NoSizeStackPanel : Panel {
    public static readonly DependencyProperty OrientationProperty =
              DependencyProperty.Register(
            "Orientation",
            typeof(Orientation),
            typeof(NoSizeStackPanel),
            new PropertyMetadata(Orientation.Horizontal, null));

    public Orientation Orientation {
      get {
        return (Orientation)base.GetValue(NoSizeStackPanel.OrientationProperty);
      }
      set {
        base.SetValue(NoSizeStackPanel.OrientationProperty, value);
      }
    }


    protected override Size MeasureOverride(Size availableSize) {
      var children = Children;
      for (int i = 0; i < children.Count; i++) {
        children[i].Measure(availableSize);
      }
      return new Size(0, 0);
    }

    protected override Size ArrangeOverride(Size finalSize) {
      // Get the collection of children
      var children = Children;
      double w = 0;
      double h = 0;
      double mh = 0;
      double mw = 0;
      for (int i = 0; i < children.Count; i++) {
        var point = (Orientation == Orientation.Horizontal) ?
           new Point(w, 0) : new Point(0, h);

        double dw = children[i].DesiredSize.Width;
        double dh = children[i].DesiredSize.Height;

        mh = Math.Max(mh, dh);
        mw = Math.Max(mw, dw);

        w += dw;
        h += dh;

        children[i].Arrange(new Rect(point.X, point.Y, dw, dh));
      }

      return (Orientation == Orientation.Horizontal) ?
        new Size(w, mh) : new Size(mw, h);
    }
  }
}

using System.Windows.Controls;
namespace Barbar.D20.SilverClient.Views.Controls.UI {
  public class Border : ContentControl {
    public Border() {
      this.DefaultStyleKey = typeof(Border);
    }
  }
}

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sfc="clr-namespace:Barbar.SilverFramework.Controls;assembly=Barbar.SilverFramework"
    xmlns:ui="clr-namespace:Barbar.D20.SilverClient.Views.Controls.UI"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="ui:Border">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ui:Border">
                    <Grid>
                        <Image Source="/Images/Border/border-left-top.png" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        <Image Source="/Images/Border/border-right-top.png" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Top" />
                        <Image Source="/Images/Border/border-left-bottom.png" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
                        <Image Source="/Images/Border/border-right-bottom.png" Stretch="None" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
                        <sfc:NoSizeStackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="25,0,25,0">
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                            <Image Source="/Images/Border/border-top.png" Stretch="None" />
                        </sfc:NoSizeStackPanel>
                        <sfc:NoSizeStackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,25,0,25" Orientation="Vertical">
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                            <Image Source="/Images/Border/border-left.png" Stretch="None" />
                        </sfc:NoSizeStackPanel>
                        <sfc:NoSizeStackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,25,0,25" Orientation="Vertical">
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                            <Image Source="/Images/Border/border-right.png" Stretch="None" />
                        </sfc:NoSizeStackPanel>
                        <sfc:NoSizeStackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="25,0,25,0">
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                            <Image Source="/Images/Border/border-bottom.png" Stretch="None" />
                        </sfc:NoSizeStackPanel>
                        <ContentPresenter Margin="25,25,25,25" Width="Auto" Height="Auto" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Tonio Tonio · Accepted Answer · 2013-08-06T12:23:29

You can use the Stretch property of Image with Fill value. With RenderTransform you can use just 3 pictures...

<Grid>
    <Image
        Source="/Images/top.png"
        Height="25"
        Margin="25,0"
        Stretch="Fill"
        VerticalAlignment="Top"/>
    <Image
        Source="/Images/top.png"
        Height="25"
        Margin="25,0"
        Stretch="Fill"
        VerticalAlignment="Bottom"
        RenderTransformOrigin="0.5,0.5">
        <Image.RenderTransform>
            <CompositeTransform ScaleY="-1"/>
        </Image.RenderTransform>
    </Image>
    <Image
        Source="/Images/left.png"
        Margin="0,25"
        Stretch="Fill"
        HorizontalAlignment="Left"
        Width="25" />
    <Image
        Source="/Images/left.png"
        Margin="0,25"
        Stretch="Fill"
        HorizontalAlignment="Right"
        Width="25"
        RenderTransformOrigin="0.5,0.5" >
        <Image.RenderTransform>
            <CompositeTransform ScaleX="-1"/>
        </Image.RenderTransform>
    </Image>
    <Image
        Source="/Images/corner.png"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Width="25"
        Height="25" />
    <Image
        Source="/Images/corner.png"
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Width="25"
        Height="25"
        RenderTransformOrigin="0.5,0.5" >
        <Image.RenderTransform>
            <CompositeTransform ScaleX="-1"/>
        </Image.RenderTransform>
    </Image>
    <Image
        Source="/Images/corner.png"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom"
        Width="25"
        Height="25"
        RenderTransformOrigin="0.5,0.5" >
        <Image.RenderTransform>
            <CompositeTransform ScaleY="-1"/>
        </Image.RenderTransform>
    </Image>
    <Image
        Source="/Images/corner.png"
        HorizontalAlignment="Right"
        VerticalAlignment="Bottom"
        Width="25"
        Height="25"
        RenderTransformOrigin="0.5,0.5" >
        <Image.RenderTransform>
            <CompositeTransform ScaleY="-1" ScaleX="-1"/>
        </Image.RenderTransform>
    </Image>
    <ContentPresenter
        x:Name="contentPresenter"
        Margin="25,25,25,25"
        Width="Auto"
        Height="Auto" />
</Grid>

Silverlight border from images

1 Answers