Search code examples
c#wpfxamlexpression-blend

Stretching part of a xaml path


I am using Paths to build a custom content border for my app written in WPF. What I want is to have only the middle portion of the path stretched when the window is stretched (Figure 2) instead of the whole thing (Figure 3).

My first instinct was to split the path into three parts and put them in a Grid. The left and right paths would stay fixed while the middle path would stretch. The problem is, I can't figure out how to put a stroke around the whole thing without having it go in between the three paths as well.

Note: This image is a reference only, the actual border is more complex but still made up of three parts.

enter image description here


Solution

  • Why not use a grid with three borders?

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Border Background="Blue" Grid.Column="0" MinWidth="50" CornerRadius="10,0,0,10" BorderBrush="LimeGreen" BorderThickness="2,2,0,2"/>
        <Border Background="Red" Grid.Column="1" BorderBrush="LimeGreen" BorderThickness="0,2"/>
        <Border Background="Blue" Grid.Column="2" MinWidth="50" CornerRadius="0,10,10,00" BorderThickness="0,2,2,2" BorderBrush="LimeGreen"/>
    </Grid>
    

    Alternately you could wrap the grid in a border:

    <Border CornerRadius="10" BorderThickness="1" Background="Blue" BorderBrush="Red">
        <Grid Background="Green" Margin="20,0"/>
    </Border>
    

    Without knowing more about what's needed, it's hard to say which one is the right answer. (If you're doing crazy stuff with clipping paths or interesting shapes, the first solution might be easier.)