Using multiple images to create a scalable control

Question

Problem

I needed to make controls that used images as backgrounds that could be any width without distorting the images. For example if I used a single image and stretched it the rounded corners of the image would become distorted.

Solution

The solution, given by Noxivs, was to use a custom UserControl with three images, two sides and a middle that is stretched.

It is important to add SnapsToDevicePixels="True" to the UserControl Grid as without that a single pixel gap appeared between the images.

MainWindow.xaml

<Window x:Class="Testing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ns="clr-namespace:Testing"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="MainGrid">
        <ns:ScalableTextBox TextBoxText="Added in XAML" Width="120" Margin="0,0,0,100">
        </ns:ScalableTextBox>
    </Grid>
</Window>

MainWindow.xaml.cs

ScalableTextBox scalableTextBox = new ScalableTextBox();
scalableTextBox.TextBoxText = "Added in C#";
scalableTextBox.Width = 100;
MainGrid.Children.Add(scalableTextBox);

ScalableTextBox.xaml.cs

public partial class ScalableTextBox : UserControl
{
    public ScalableTextBox()
    {
        InitializeComponent();
    }

    public string TextBoxText
    {
        get { return this.TextBoxName.Text; }
        set { this.TextBoxName.Text = value; }
    }
}

ScalableTextBox.xaml

<UserControl x:Class="Testing.ScalableTextBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d" 
         d:DesignHeight="36" d:DesignWidth="50" Height="36" MinWidth="29">
    <Grid>
        <Grid SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="14" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="14" />
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="pack://siteoforigin:,,,/Images/left.png" />
            <Image Grid.Column="1" Stretch="Fill" Source="pack://siteoforigin:,,,/Images/center.png"/>
            <Image Grid.Column="2" Source="pack://siteoforigin:,,,/Images/right.png" />
        </Grid>
        <TextBox Name="TextBoxName" VerticalAlignment="Center"
                 HorizontalAlignment="Center" Background="{x:Null}"
                 BorderBrush="{x:Null}" FontSize="12"/>
    </Grid>
</UserControl>

Thanks again to Noxivs!

Answer 1

I'm not sure to understand what you want but :

• I think you can create exactly the same design of your images in XAML (vectorial keeps your style no matter the size).
• What about the creation of your own control user with your textbox (0 opacity) and as many images as you want in the background ? (not really nice)

These are only suggestions.

EDIT :

And here is your scalable textbox :

I had to split your first image. https://i.stack.imgur.com/cGJ8u.png https://i.stack.imgur.com/Fo4Oo.png

<UserControl x:Class="YourNamespace.ScalableTextBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" Height="36" MinWidth="29">
<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="14" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="14" />
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="left.png" />
        <Image Grid.Column="1" Source="center.png" Stretch="Fill"/>
        <Image Grid.Column="2" Source="right.png" />
    </Grid>
    <TextBox VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" FontSize="14" FontFamily="Comic Sans MS"  Margin="8,0"/>
</Grid>

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ns="clr-namespace:_28400241"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ns:ScalableTextBox></ns:ScalableTextBox>
    </Grid>
</Window>

I still think it is better to create the controls in XAML.

Regards.

EDIT 2 :

With a dynamic loading of images (myGrid is the main grid of the window, and i named the 3 images control in the ScalableTextBox object) :

    public MainWindow()
    {
        InitializeComponent();
        ScalableTextBox tb = new ScalableTextBox();
        tb.Width = 140;

        BitmapImage src = new BitmapImage();
        src.BeginInit();
        src.UriSource = new Uri("./left.png", UriKind.Relative);
        src.EndInit();

        tb.LeftImage.Source = src;

        src = new BitmapImage();
        src.BeginInit();
        src.UriSource = new Uri("./center.png", UriKind.Relative);
        src.EndInit();

        tb.CenterImage.Source = src;

        src = new BitmapImage();
        src.BeginInit();
        src.UriSource = new Uri("./right.png", UriKind.Relative);
        src.EndInit();

        tb.RightImage.Source = src;


        Grid.SetRow(tb, 0);
        Grid.SetColumn(tb, 0);
        myGrid.Children.Add(tb);
    }

Answer 2

I'm not sure to understand what you want but if you just want the image to appear as a background for the textbox, you could create a style for the textbox, modify the ControlTemplate and place a grid within it, containing the images.

For example (this is just to give you an idea of what I am trying to explain, not the exact code to implement):

<Style TargetType="{x:Type TextBox}">
  <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="TextBox">
            <Grid>
                <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="14" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="14" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="left.png" />
                <Image Grid.Column="1" Source="center.png" Stretch="Fill"/>
                <Image Grid.Column="2" Source="right.png" />
                <ScrollViewer x:Name="ContentElement" Grid.Column="1"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>