CODEWITHSUNDEEP
c#xamlwindows-phone-8
Renato Ramos Nascimento
Renato Ramos Nascimento

Reputation: 640

Stackpanel with round border

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.

Upvotes: 2

Views: 13466

Answers (5)

m b
m b

Reputation: 1

Here the an example:

<Border x:Name="stPan" CornerRadius="6" BorderThickness="0.4" BorderBrush="Gray" Background="AliceBlue"/>
<StackPanel Orientation="Horizontal">
    <vw:Label Text="{Binding Index, ElementName=self}" FontSize="20" VerticalAlignment="Center" Margin="8,0" Width="25"/>
    <vw:TextVarOut VariableName="{Binding VarNameAuftragNo, ElementName=self}"/>
    <vw:TextVarOut VariableName="{Binding VarNameArtikelBez, ElementName=self}"/>
    <vw:TextVarOut VariableName="{Binding VarNameArtNo, ElementName=self}"/>
    <vw:NumericVarOut VariableName="{Binding VarNameStueckzahl, ElementName=self}" Margin="2" Width="150"/>
    <vw:TextVarOut VariableName="{Binding VarNameStarttermin, ElementName=self}"/>
    <vw:TextVarOut VariableName="{Binding VarNameEndtermin, ElementName=self}"/>
</StackPanel>

Upvotes: 0

Jonathan Tuzman
Jonathan Tuzman

Reputation: 13262

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>

Upvotes: 3

uncle_scrooge
uncle_scrooge

Reputation: 429

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>

Upvotes: 5

WiredPrairie
WiredPrairie

Reputation: 59763

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;

Upvotes: 1

123 456 789 0
123 456 789 0

Reputation: 10865

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

Upvotes: 0

Related Questions