0

問題

画像を歪ませずに任意の幅の背景として画像を使用するコントロールを作成する必要がありました。たとえば、単一の画像を使用して引き伸ばすと、画像の丸みを帯びた角が歪んでしまいます。

解決

Noxivs によって提供された解決策は、3 つの画像、2 つの側面、および引き伸ばされた中央を持つカスタム UserControl を使用することでした。

左画像 センター画像 右画像

SnapsToDevicePixels="True" を UserControl Grid に追加することが重要です。これは、画像間に単一のピクセル ギャップが発生しないようにするためです。

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>

今後ともノクシブズをよろしくお願いいたします！

4

2 に答える 2

0

あなたが何を望んでいるのかよくわかりませんが、画像をテキストボックスの背景として表示したいだけなら、テキストボックスのスタイルを作成し、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>

于 2015-02-11T23:47:31.447 に答える