Stackpanel with round border

Question

I'm developing a windows phone 8 app and i have the following Border with a StackPanel but the StackPanel is not clipped to the 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>

I don't know why i have done some dig on the web and this sample not works.

Anyone could help me? Thanks.

I take it setting "ClipToBounds" or setting the "Clip" property to the rectangle of your border doesn't work? — BradleyDotNET, Jan 28 '14 at 17:28

score 4 · Accepted Answer · answered Jan 29 '14 at 13:07

can you please try by setting background to border not to stackpanel.Almost all will be same.

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

score 3 · Answer 2 · answered Apr 27 '20 at 20:57

I got this excellent answer from 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>

score 1 · Answer 3 · answered Jan 28 '14 at 18:40

Unfortunately, without clipping the contents, it works as you're seeing.

There unfortunately isn't a simple "set a property" solution (and this has been true from Day One of Avalon -> WPF -> Silverlight -> Windows Phone). There are however some work-arounds, some less desirable:

Change the UI

One that many developer has done is to change the UI design. :) I've certainly used this approach. In a modern style Windows application it's more rare to see rounded containers.

Or, increase the padding for the inner content so that the clipping wouldn't occur.

Building a Clipping Path

However, if that doesn't work, you'll need to set the Clip property of the Border, accurately. The challenge with that is that the Clip must be specified as a Path, which is not straightforward to do, especially as the radius of the border and size of the contents changes. While the code can not be dropped in exactly, the best example of creating and handling the changes necessary to a clipping mask can be found in a library for Silverlight (originally created by the Expression Blend team):

The file is called ClippingBehavior.cs (here). While there is not a Behavior class in any existing Windows Phone library to derive from and use directly, you should be able to follow the logic that it performs. It tracks size changes and eventually creates a properly defined clipping mask that is then set on the attached Border. It's not a lot of code really and is quite straightforward. I'm not going to copy the code here, but basically it creates a PathGeometry and then sets about to create the correct path:

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 */

Eventually, it closes the figure and sets the Clip property:

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

score 0 · Answer 4 · answered Jan 28 '14 at 16:46

0

Instead of using ClipToBounds or OpacityMask, Try using the radial gradient as the background to an additional Border element.

Sample

<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"/>

answered Jan 28 '14 at 16:46

123 456 789 0

10,565
4
43
72

1

How is this going to clip the contents of the `StackPanel`? Your example doesn't have a `StackPanel`? – WiredPrairie Jan 28 '14 at 18:41
1

@WiredPrairie It is an example on how to clip controls. I gave a TextBlock example. Your answer doesn't clip contents of the StackPanel either. – 123 456 789 0 Jan 28 '14 at 18:50
`Clip` will clip anything, which is what I was suggesting. It would work for a StackPanel or any control. Nesting `Border`s does not. It's not a general purpose solution -- you've had to adjust a UI a lot to make this appear to work at all (and you've had to set fixed sizes). – WiredPrairie Jan 28 '14 at 19:32
@WiredPrairie Clipping doesn't guarantee that the object will clip. – 123 456 789 0 Jan 28 '14 at 20:01

Stackpanel with round border

4 Answers4

Change the UI

Building a Clipping Path

Linked