【问题标题】:Vertical aligning content of PathListBoxPathListBox的垂直对齐内容
【发布时间】:2012-01-02 11:39:46
【问题描述】:

我有一个包含来自 Blend SDK 的 PathListBox 的控件(请参阅下面的 XAML)。里面的物品具有相同的宽度和不同的高度。目前,项目的中点遵循圆弧的路径(见图),即它们明显垂直排列为“中心”。但是,我希望项目“顶部”垂直对齐,因此它们的顶部遵循弧的路径。我该怎么做?

<Grid x:Name="LayoutRoot">
    <ec:PathListBox Margin="160,290,-30,-250">
        <ec:PathListBox.LayoutPaths>
            <ec:LayoutPath SourceElement="{Binding ElementName=arc}" 
                Padding="-25"  FillBehavior="NoOverlap" 
                Distribution="Even"  Span="0.5"/>
        </ec:PathListBox.LayoutPaths>
        <Rectangle Fill="#FFF4F4F5" Height="103" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="120" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="140" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="100" Width="100"/>
        <Rectangle Fill="#FFF4F4F5" Height="265" Width="100"/>
    </ec:PathListBox>
    <ed:Arc x:Name="arc" 
        ArcThickness="10"  ArcThicknessUnit="Pixel"  Margin="160,290,-30,-250" 
        Stretch="None"  Stroke="Transparent"  StartAngle="-7" 
        RenderTransformOrigin="0.5,0.5"  StrokeThickness="3" 
        Opacity="0.155" Fill="LightGray">
        <ed:Arc.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="1" ScaleX="-1"/>
                <SkewTransform AngleY="-17" AngleX="-16"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </ed:Arc.RenderTransform>
    </ed:Arc>
</Grid>

【问题讨论】:

标签: wpf xaml vertical-alignment blend


【解决方案1】:

只需更改矩形的边距:

...
<Rectangle Fill="Green" Height="103" Width="100" Margin="0,130,0,0"/>
<Rectangle Fill="Green" Height="120" Width="100" Margin="0,120,0,0"/>
<Rectangle Fill="Green" Height="140" Width="100" Margin="0,140,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
<Rectangle Fill="Green" Height="100" Width="100" Margin="0,100,0,0"/>
<Rectangle Fill="Green" Height="265" Width="100" Margin="0,265,0,0"/>
...

我自己在 Blend4 上尝试过,效果很好。

【讨论】:

  • 您使用的是什么版本的 Blend?
  • 这个技巧不错,我去看看。实际上,项目是动态生成的复杂 UI 元素,它们的高度取决于内容。我只是用矩形简化了这个问题。但如果可行,我可以将边距数据绑定到高度。
  • 应该没有区别,你可以使用转换器,因为厚度是不可变的。
最近更新 更多