XAML路径大小调整和定位

Question

我正在尝试使用路径和矩形为TabItem设计模板。标签布局的两侧是适应设计曲线的路径。我遇到了让双方正确排队/调整大小的问题。这是我的XAML：

<StackPanel Orientation="Horizontal">
 <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 97.1985,101.669L 104.824,95.0005C 105.574,94.3338 106.921,93.8627 107.824,93.9171L 107.824,101.667L 97.1985,101.669 Z "/>
 <Grid>
          <Rectangle Grid.Column="1" Fill="#FF000000"/>
  <ContentControl Grid.Column="1" x:Name="HeaderTopSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
 </Grid>
 <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 118.714,101.678L 111.088,95.0097C 110.338,94.343 108.991,93.8719 108.088,93.9264L 108.088,101.676L 118.714,101.678 Z "/>
</StackPanel>

（我为没有换行而道歉。我是StackOverflow的新手，不知道如何插入它们，也没有时间弄明白：D）

发布的代码片段几乎有效：侧面路径的大小正确，但它们不显示在一行中，它们在矩形/下一个元素后面重叠。如果我设置一个固定的宽度它们也可以，但我不能将宽度设置为固定，它们需要是流动的，以防标签的内容超过基本高度。

This is an idea of what I would like to get
边（路径）根据ContentControl的高度

统一增长

Answer 1

取3（现在我们知道要求是什么）：

基本上为了获得理想的效果，如果高度发生变化，您需要使用2个侧面部件来调整宽度，以保持固定的纵横比。这将强制父容器扩展，因为实际内容越来越高，并且侧面越高越匹配。没有任何容器（包括ViewBox）以这种方式工作。

您可以使用自定义容器来执行此操作，但首选解决方案是创建一种行为，以保持其对象在高度变化时的纵横比。我们将其称为FixedAspectBehavior：

using System.Windows;
using System.Windows.Interactivity;

namespace SilverlightApplication1
{
    public class FixedAspectRatioBehavior : TargetedTriggerAction<FrameworkElement>
    {
        public double AspectRatio { get; set; }

        protected override void OnAttached()
        {
            base.OnAttached();
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            if (element != null)
            {
                AspectRatio = element.Width/element.Height;
                element.SizeChanged += new SizeChangedEventHandler(element_SizeChanged);
            }
        }

        void element_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            FrameworkElement element = AssociatedObject as FrameworkElement;
            element.Width = element.Height * AspectRatio;
        }

        protected override void Invoke(object parameter)
        {
        }
    }
}

布局需要一些工作，因为自调整大小元素（类型为路径）根据其父容器做一些非常奇怪的事情。我不得不使用ViewBoxes作为路径的父级，并结合行为来获得所需的结果：

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
    <Viewbox>
            <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 97.1985,101.669L 104.824,95.0005C 105.574,94.3338 106.921,93.8627 107.824,93.9171L 107.824,101.667L 97.1985,101.669 Z " UseLayoutRounding="False" HorizontalAlignment="Left">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <local:FixedAspectRatioBehavior/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Path>
        </Viewbox>
    <Grid Width="Auto" Background="#FFFF0D0D" Grid.ColumnSpan="1" Grid.Column="1">
        <Rectangle Grid.Column="1" Fill="#FFD21F1F"/>
        <ContentControl Grid.Column="1" x:Name="HeaderTopSelected" FontSize="{TemplateBinding Control.FontSize}" Foreground="{TemplateBinding Control.Foreground}" IsTabStop="False" Cursor="{TemplateBinding FrameworkElement.Cursor}" HorizontalAlignment="{TemplateBinding FrameworkElement.HorizontalAlignment}" VerticalAlignment="{TemplateBinding FrameworkElement.VerticalAlignment}"/>
        <TextBlock TextWrapping="Wrap" FontSize="16"><Run Text="This is just a very string to see "/><LineBreak/><Run Text="what happens  when we get to a size where the container should get larger than the default size"/></TextBlock>
    </Grid>
    <Viewbox Grid.Column="2">
        <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 118.714,101.678L 111.088,95.0097C 110.338,94.343 108.991,93.8719 108.088,93.9264L 108.088,101.676L 118.714,101.678 Z " UseLayoutRounding="False" d:LayoutOverrides="VerticalAlignment">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <local:FixedAspectRatioBehavior/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Path>
    </Viewbox>
        </Grid>

取1（现在已经过时，如下面的那样）：

路径的宽度不会沿着堆栈面板中的项目推送。在这方面，除了缩放项目之外，它的宽度是无用的。

要获得所需效果，请将每个路径分组到网格中。尺寸问题就消失了。

抱歉让你的矩形可怕的红色显示清楚：）

以下XAML：

<StackPanel Orientation="Horizontal" Width="Auto">
    <Grid>
        <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 97.1985,101.669L 104.824,95.0005C 105.574,94.3338 106.921,93.8627 107.824,93.9171L 107.824,101.667L 97.1985,101.669 Z " UseLayoutRounding="False" d:LayoutOverrides="Width"/>
    </Grid>
    <Grid Width="100" Background="#FFFF0D0D">
        <Rectangle Grid.Column="1" Fill="#FFD21F1F"/>
        <ContentControl Grid.Column="1" x:Name="HeaderTopSelected" FontSize="{TemplateBinding Control.FontSize}" Foreground="{TemplateBinding Control.Foreground}" IsTabStop="False" Cursor="{TemplateBinding FrameworkElement.Cursor}" HorizontalAlignment="{TemplateBinding FrameworkElement.HorizontalAlignment}" VerticalAlignment="{TemplateBinding FrameworkElement.VerticalAlignment}"/>
    </Grid>
    <Grid>
        <Path Stretch="UniformToFill" Fill="#FF000000" Data="F1 M 118.714,101.678L 111.088,95.0097C 110.338,94.343 108.991,93.8719 108.088,93.9264L 108.088,101.676L 118.714,101.678 Z " UseLayoutRounding="False" d:LayoutOverrides="Width"/>
    </Grid>
</StackPanel>

选择2（现在也已过时，请参阅顶部的3 ）：

如果需要固定的末端宽度，请使用网格而不是堆栈面板（下面的XAML）。

如果您需要其他内容，请提供一些所需效果的屏幕截图。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
    <Path Stretch="Fill" Fill="#FF000000" Data="F1 M 97.1985,101.669L 104.824,95.0005C 105.574,94.3338 106.921,93.8627 107.824,93.9171L 107.824,101.667L 97.1985,101.669 Z " UseLayoutRounding="False" d:LayoutOverrides="Width"/>
    <Grid Width="Auto" Background="#FFFF0D0D" Grid.ColumnSpan="1" Grid.Column="1">
        <Rectangle Grid.Column="1" Fill="#FFD21F1F"/>
        <ContentControl Grid.Column="1" x:Name="HeaderTopSelected" FontSize="{TemplateBinding Control.FontSize}" Foreground="{TemplateBinding Control.Foreground}" IsTabStop="False" Cursor="{TemplateBinding FrameworkElement.Cursor}" HorizontalAlignment="{TemplateBinding FrameworkElement.HorizontalAlignment}" VerticalAlignment="{TemplateBinding FrameworkElement.VerticalAlignment}" Content="Hello there.... this is a long string to see what happens"/>
    </Grid>
    <Path Stretch="Fill" Fill="#FF000000" Data="F1 M 118.714,101.678L 111.088,95.0097C 110.338,94.343 108.991,93.8719 108.088,93.9264L 108.088,101.676L 118.714,101.678 Z " UseLayoutRounding="False" d:LayoutOverrides="Width" Grid.Column="2"/>
        </Grid>