Question

我正在开发一个Windows Phone 8应用程序，我有以下Border StackPanel，但StackPanel没有剪切到Border

            <Border Grid.Column="1" BorderThickness="3" BorderBrush="Black" CornerRadius="50">
            <StackPanel Width="425">
                <StackPanel.Background>
                    <SolidColorBrush Color="#FFFBEAEA" Opacity="0.25"/>
                </StackPanel.Background>
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" TextWrapping="Wrap" Margin="12,0,12,6" Foreground="Black"/>
                <TextBlock Text="{Binding Type}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="Black"/>
                <TextBlock Text="{Binding Text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Foreground="Black"/>
            </StackPanel>
            </Border>

我不知道为什么我在网上做了一些挖掘，这sample不起作用。

有人可以帮助我吗？感谢。

Answer 1

请你尝试将背景设置为border而不是stackpanel。几乎所有都是相同的。

<Border.Background>
==set what type of background u want==
  </Border.Background>
<StackPanel Width="425">

            <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" TextWrapping="Wrap" Margin="12,0,12,6" Foreground="Black"/>
            <TextBlock Text="{Binding Type}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="Black"/>
            <TextBlock Text="{Binding Text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Foreground="Black"/>
        </StackPanel>

Answer 2

不幸的是，如果没有裁剪内容，它就会像你看到的一样工作。

遗憾的是，这不是一个简单的“设置属性”解决方案（从Avalon的第一天开始 - ＆gt; WPF - ＆gt; Silverlight - ＆gt; Windows Phone）也是如此。然而，有一些解决方法，一些不太理想：

更改用户界面

许多开发人员所做的就是改变UI设计。 :)我当然使用这种方法。在现代风格的Windows应用程序中，看到圆形容器更为罕见。

或者，增加内部内容的填充，以便不会发生剪裁。

构建剪切路径

但是，如果这不起作用，则需要准确地设置Border的Clip属性。这样做的挑战是Clip必须指定为Path，这不是直截了当的，特别是当边框的半径和内容的大小发生变化时。虽然代码不能完全删除，但是创建和处理剪贴蒙版所需更改的最佳示例可以在Silverlight库中找到（最初由Expression Blend团队创建）：

该文件名为ClippingBehavior.cs（here）。虽然任何现有的Windows Phone库中都没有Behavior类来直接派生和使用，但您应该能够遵循它执行的逻辑。它跟踪大小更改并最终创建一个正确定义的剪贴蒙版，然后在附加的边框上设置。实际上并不是很多代码而且非常简单。我不打算在这里复制代码，但基本上它会创建一个PathGeometry，然后设置创建正确的路径：

PathGeometry geometry = new PathGeometry();
    PathFigure figure = new PathFigure();
    geometry.Figures.Add(figure);

    figure.StartPoint = new Point(bounds.Left + radius.TopLeft, bounds.Top);
    figure.Segments.Add(new LineSegment() {
    Point = new Point(bounds.Right - radius.TopRight, bounds.Top),
});
/* more code follows == see original file for details */

最终，它会关闭数字并设置Clip属性：

figure.IsClosed = true;
this.AssociatedObject.Clip = geometry;

Answer 3

尝试使用径向渐变作为其他ClipToBounds元素的背景，而不是使用OpacityMask或Border。

样品

<Grid Width="256" Height="256">
<Border CornerRadius="16" Background="Black" Margin="4">
  <Border Background="Gray" Margin="32">
    <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt"
               HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Border>
</Border>
<Border CornerRadius="16" Margin="4">
  <Border.Background>
    <RadialGradientBrush>
      <RadialGradientBrush.Transform>
        <TransformGroup>
          <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/>
          <TranslateTransform Y="-235"/>
        </TransformGroup>
      </RadialGradientBrush.Transform>
      <GradientStop Color="White" Offset="0"/>
      <GradientStop Color="Transparent" Offset="1"/>
    </RadialGradientBrush>
  </Border.Background>
</Border>
<Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/>

Answer 4

我从this article得到了一个很好的答案。

<!--Grid provides container to give border and mask for TabPanel (which contains the tab headers)-->
<Grid VerticalAlignment="Center" Grid.Column="0">

    <!--First border (previous sibling) provides mask to round edges of TabPanel-->
    <Border Name="mask" Background="White" CornerRadius="5"/>

    <YOUR ACTUAL CONTENT />

    <!-- Second border (subsequent sibling) provides the actual border for the TabPanel.
            Must be a sibling, not a parent, or border won't "wrap" correctly. -->
    <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black" CornerRadius="5"/>

</Grid>

Stackpanel与圆形边框

4 个答案:

更改用户界面

构建剪切路径