Question

我想制作通用控件，它将具有漂亮的边框和内部内容演示者（这将是：左上角 border-left-top ）

这是我选择这样做的一种方式，因为没有平铺图像画笔。我有预定义的磁贴（10对于我的应用程序中的所有场景都足够了）。它有效，但我必须明确指定此边框控件的宽度/高度，因为预定义的图块正在放大网格。有没有办法让它根据内容的宽度/高度自动调整大小，或者采用一些不同的更优雅的方式？

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

修改我最终得到了这个解决方案（创建我自己的“隐藏”结果大小的StackPanel），由于引用内容控件中的x：Name =“”项，我也从UserControl转移到ContentControl;如果有人知道更优雅的方式，我想知道：

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>

Answer 1

您可以使用Stretch的{{1}}属性Image值。使用Fill，您只能使用3张图片...

RenderTransform

来自图像的Silverlight边框

1 个答案: