Is there a way to specify the Z-order of an element in XAML???

Hi All,

I would like to design a button with two rectangles in it.

Around theese two rectangles a would like to have a border with rounded edges.

The problem no is that if I do it like to code below, I will see the edges of the rectangles and not the rounded edges of the border.

Do anyone have an idea to fix this problem

Thx!!

<Border BorderBrush="{StaticResource bordercolor}" BorderThickness="1" CornerRadius="5">

<DockPanel LastChildFill="True">

<Grid Width="20" DockPanel.Dock="Left">

<Rectangle Height="Auto">

<Rectangle.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<LinearGradientBrush.GradientStops>

<GradientStop Offset="0" Color="{StaticResource navigationstartcolor}" />

<GradientStop Offset="1" Color="{StaticResource navigationstopcolor}" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Polygon Points="10,2 10,17 1,10" Fill="{StaticResource forecolor}" VerticalAlignment="Center" HorizontalAlignment="Center" />

</Grid>

<Grid HorizontalAlignment="Stretch" Width="Auto">

<Rectangle>

<Rectangle.Fill>

<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

<LinearGradientBrush.GradientStops>

<GradientStop Offset="0" Color="{StaticResource backstartcolor}" />

<GradientStop Offset="1" Color="{StaticResource backstopcolor}" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<TextBlock TextWrapping="Wrap" ClipToBounds="True" Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />

</Grid>

</DockPanel>

</Border>



Answer this question

Is there a way to specify the Z-order of an element in XAML???

  • chale

    I can't use a rounded RectangleGeometry, cause only the left edges of the shape has to be rounded.


  • Vnsmith5

    Violator --

    We don't clip the content of a Border, which is why you see the edges of the rectangles on top of the rounded border.

    There are a few options you can pursue here:

    1. You can use the Border's Background in order to create the Fill you are looking for, since the background will be clipped.

    2. You can manually apply a clipping geometry to the contnet of the border (using the Clip property of type Geometry). The issue here is that the geometry you set to clip will have to be computed by you to match the inside of the border.

    3. Use a Grid and layer your Border on top of the content (instead of containing your content within a Grid). This will ensure that your border is top-most, but you may still bleed through underneath.



  • Jim Reyne

    No, you cannot specify the Z-order. What can you do is to clip the content of the border (use a rounded RectangleGeometry for the Clip property).


  • Is there a way to specify the Z-order of an element in XAML???