Использование нескольких изображений для создания масштабируемой Control

Question

проблемы

мне нужно, чтобы сделать элементы управления, которые используются изображения в качестве фона, которые могут быть любой шириной без искажения изображения. Например, если я использовал одно изображение и растянул его, округленные углы изображения будут искажены.

Решение

Решение, данное Noxivs, было использовать пользовательский UserControl с тремя изображениями, с двух сторон и посередине, натянутой.

Важно добавить SnapsToDevicePixels = «True» в UserControl сетке, как без этого один разрыв пикселей появился между изображениями.

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> 

Еще раз спасибо Noxivs!

Answer 1

Я не уверен, чтобы понять, что вы хотите, но:

• Я думаю, что вы можете создать точно такой же дизайн ваших изображений в XAML (векторный сохраняет свой стиль независимо от размера).
• Как создать собственный пользовательский элемент управления с текстовым полем (0 непрозрачность) и столько изображений, сколько хотите в фоновом режиме? (не очень хорошо)

Это только предложения.

EDIT:

А вот масштабируемый текстовое поле:

я должен был разделить свой первый снимок. http://i.stack.imgur.com/cGJ8u.png http://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> 

Я до сих пор считаю, что лучше создать элементы управления в XAML.

С уважением.

EDIT 2:

С динамической загрузкой изображений (myGrid является основной сеткой окна, и я по имени управляет 3 изображений в объекте ScalableTextBox):

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

Я не зная, что вы хотите, но если вы хотите, чтобы изображение отображалось в качестве фона для текстового поля, вы могли бы создать стиль для текстового поля, изменить ControlTemplate и поместить в него сетку, содержащую изображения.

Например (это просто чтобы дать вам представление о том, что я пытаюсь объяснить, а не точный код для реализации):

<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>