[WPF] Path Width automatisch an dynamische Spaltenbreite anpassen

[palaber]

Hi zusammen,

ich habe ein Problem. Und zwar habe ich ein Grid mit verschiedenen Spalten. Die Breite einiger Spalten ist dynamisch.
Außerdem habe ich einen Path der in einem Canvas eingebettet ist. Bei diesem Path soll sich nun die Width-Propertie abhängig von der Spaltenbreite des Grids ändern. Der "Pfeil" soll quasi immer in der 3. Spalte enden.

Hier mal mein Bsp.-Code:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>

        <Canvas Grid.ColumnSpan="3"
                Grid.RowSpan="3">
            <!--Pfeil-->
            <Path Grid.ColumnSpan="3"
                  Grid.RowSpan="7"
                  HorizontalAlignment="Left"
                  Fill="red"
                  Stretch="Fill"
                  Data="M277.44488,12.89456 C277.1989,12.402527 277.44788,12 277.99755,12 L283.99722,12 C284.54748,12 284.79647,12.402527 284.54948,12.89456 L281.44466,19.105973 C281.19867,19.598006 280.7967,19.598006 280.54971,19.105973 z M272.00001,0 L10.000006,0 C4.5000061,0 6.1035156E-06,4.5 6.1035156E-06,10 L6.1035156E-06,242 2.0000061,242 2.0000061,10 C2.0000061,5.589 5.5890061,2 10.000006,2 L272.00001,2 C276.41101,2 280.00001,5.589 280.00001,10 L280.00001,13 282.00001,13 282.00001,10 C282.00001,4.5 277.50001,0 272.00001,0 M280.00001,380 L280.00001,392 C280.00001,396.411 276.41101,400 272.00001,400 L10.000006,400 C5.5890061,400 2.0000061,396.411 2.0000061,392 L2.0000061,320 6.1035156E-06,320 6.1035156E-06,392 C6.1035156E-06,397.5 4.5000061,402 10.000006,402 L272.00001,402 C277.50001,402 282.00001,397.5 282.00001,392 L282.00001,380 z">
            </Path>
        </Canvas>
    </Grid>

Nehm ich den Path aus dem Canvas heraus wird die Darstellung leider verändert.

 

[8utch0r]

Mach aus deinem Canvas ein Grid dann funktioniert es, denke ich, so wie zu willst.

        <Grid  Grid.ColumnSpan="3"
                Grid.RowSpan="3">
            <!--Pfeil-->
            <Path Grid.ColumnSpan="3"
                  Grid.RowSpan="7"
                  HorizontalAlignment="Left"
                  Fill="red"
                  Stretch="Fill"
                 
                  Data="M277.44488,12.89456 C277.1989,12.402527 277.44788,12 277.99755,12 L283.99722,12 C284.54748,12 284.79647,12.402527 284.54948,12.89456 L281.44466,19.105973 C281.19867,19.598006 280.7967,19.598006 280.54971,19.105973 z M272.00001,0 L10.000006,0 C4.5000061,0 6.1035156E-06,4.5 6.1035156E-06,10 L6.1035156E-06,242 2.0000061,242 2.0000061,10 C2.0000061,5.589 5.5890061,2 10.000006,2 L272.00001,2 C276.41101,2 280.00001,5.589 280.00001,10 L280.00001,13 282.00001,13 282.00001,10 C282.00001,4.5 277.50001,0 272.00001,0 M280.00001,380 L280.00001,392 C280.00001,396.411 276.41101,400 272.00001,400 L10.000006,400 C5.5890061,400 2.0000061,396.411 2.0000061,392 L2.0000061,320 6.1035156E-06,320 6.1035156E-06,392 C6.1035156E-06,397.5 4.5000061,402 10.000006,402 L272.00001,402 C277.50001,402 282.00001,397.5 282.00001,392 L282.00001,380 z">
            </Path>
        </Grid>

 

[marcOcram]

Moin,

Hier ein Lösungsvorschlag für dich. Bin gerade mobil unterwegs und kann es nicht testen. Gefühlt sollte es auch ohne Canvas mit HorizontalAlignment und VerticalAlignment auf Stretch und Stretch selbst auf UniformFill.

Hiermit bindest du die Breite des Paths an die aktuelle Breite des Grids.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
       
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>

        <Canvas Grid.ColumnSpan="3"
                Grid.RowSpan="3">
            <!--Pfeil-->
            <Path Grid.ColumnSpan="3"
                  Grid.RowSpan="7"
                  Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}" 
                  HorizontalAlignment="Left"
                  Fill="red"
                  Stretch="Fill"
                  Data="M277.44488,12.89456 C277.1989,12.402527 277.44788,12 277.99755,12 L283.99722,12 C284.54748,12 284.79647,12.402527 284.54948,12.89456 L281.44466,19.105973 C281.19867,19.598006 280.7967,19.598006 280.54971,19.105973 z M272.00001,0 L10.000006,0 C4.5000061,0 6.1035156E-06,4.5 6.1035156E-06,10 L6.1035156E-06,242 2.0000061,242 2.0000061,10 C2.0000061,5.589 5.5890061,2 10.000006,2 L272.00001,2 C276.41101,2 280.00001,5.589 280.00001,10 L280.00001,13 282.00001,13 282.00001,10 C282.00001,4.5 277.50001,0 272.00001,0 M280.00001,380 L280.00001,392 C280.00001,396.411 276.41101,400 272.00001,400 L10.000006,400 C5.5890061,400 2.0000061,396.411 2.0000061,392 L2.0000061,320 6.1035156E-06,320 6.1035156E-06,392 C6.1035156E-06,397.5 4.5000061,402 10.000006,402 L272.00001,402 C277.50001,402 282.00001,397.5 282.00001,392 L282.00001,380 z">
            </Path>
        </Canvas>
    </Grid>

Wenn sich der Pfeil in der Darstellung ändert solltest du an die Stretch-Eigenschaft auf UniformFill setzen. Dann wird das Seitenverhältnis beibehalten.