1

我正在尝试使用路径和矩形为 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）

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

这是我想要得到的想法
边（路径）根据 ContentControl 的高度均匀增长

4

1 回答 1

3

取 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（现在已过时，如下面的 2）：

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

要获得您想要的效果，请将每条路径分组到一个网格中。然后尺寸问题就消失了。

替代文字

很抱歉把你的矩形变成可怕的红色以清楚地显示它:)

替代文字

下面的 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>
于 2010-08-25T14:08:15.733 回答