CODEWITHSUNDEEP
c#xaml
Beems
Beems

Reputation: 810

XAML : How to make content size force height of parent and other objects?

I'd like to solve the following with pure XAML if possible, but if it is not possible please let me know. I don't have a C# solution either, so if that must be utilized please send me down the appropriate path:

In the following, there is a 2-column grid. In the left column is a scrollviewer with dynamic content. In the right column is a stackpanel with dynamic content. I want the content of the right column to control the height of the parent grid and the left column - in other words, I want the right column to be the master. In the right column there might be three items or there might be 10. If there are only three, the height of the entire grid should be short and the content in the left scrollviewer should scroll. There may be 100 items in the left scrollviewer, so I can't have that item controlling the height.

Here is the sample code: 

    <Grid x:Name="grd_Parent" Background="#FFF4E9FF">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer x:Name="Left" Grid.Column="0">
            <!-- This side should scale (and scroll) to the height of the right column-->
            <StackPanel VerticalAlignment="Top">
                <Rectangle Height="50" Fill="Red"/>
                <Rectangle Height="50" Fill="Blue"/>
                <Rectangle Height="50" Fill="Black"/>
                <Rectangle Height="50" Fill="Brown"/>
                <Rectangle Height="50" Fill="Purple"/>
                <Rectangle Height="50" Fill="DarkGreen"/>
                <Rectangle Height="50" Fill="Violet"/>
                <Rectangle Height="50" Fill="Wheat"/>
                <Rectangle Height="50" Fill="DarkCyan"/>
                <Rectangle Height="50" Fill="DarkGray"/>
                <Rectangle Height="50" Fill="DarkOrange"/>
            </StackPanel>
        </ScrollViewer>
        <StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
            <!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
            <TextBlock Height="50" Text="This"/>
            <TextBlock Height="50" Text="Side"/>
            <TextBlock Height="50" Text="Should"/>
            <TextBlock Height="50" Text="Determine"/>
            <TextBlock Height="50" Text="The"/>
            <TextBlock Height="50" Text="Height"/>
            <TextBlock Height="50" Text="Of"/>
            <TextBlock Height="50" Text="Parent"/>
        </StackPanel>
    </Grid>

Here is a screenshot of the sample as it exists: Sample App

Here is a screenshot of what I'm hoping it can look like: Sample App Correct

Thanks in advance, Beems

Upvotes: 3

Views: 7507

Answers (1)

Caleb Keith
Caleb Keith

Reputation: 816

Try this and let me know if it works. The below changes cause the ScrollViewer to bind to the ActualHeight of the StackPanel. This way, it should never be larger than the StackPanel.

<Grid x:Name="grd_Parent" Background="#FFF4E9FF">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <ScrollViewer x:Name="Left" Height="{Binding ElementName=Right, Path=ActualHeight}" Grid.Column="0">
        <!-- This side should scale (and scroll) to the height of the right column-->
        <StackPanel VerticalAlignment="Top">
            <Rectangle Height="50" Fill="Red"/>
            <Rectangle Height="50" Fill="Blue"/>
            <Rectangle Height="50" Fill="Black"/>
            <Rectangle Height="50" Fill="Brown"/>
            <Rectangle Height="50" Fill="Purple"/>
            <Rectangle Height="50" Fill="DarkGreen"/>
            <Rectangle Height="50" Fill="Violet"/>
            <Rectangle Height="50" Fill="Wheat"/>
            <Rectangle Height="50" Fill="DarkCyan"/>
            <Rectangle Height="50" Fill="DarkGray"/>
            <Rectangle Height="50" Fill="DarkOrange"/>
        </StackPanel>
    </ScrollViewer>
    <StackPanel x:Name="Right" Grid.Column="1" VerticalAlignment="Top">
        <!-- This content is dynamic as well, but height of this should be the height of the parent grid -->
        <TextBlock Height="50" Text="This"/>
        <TextBlock Height="50" Text="Side"/>
        <TextBlock Height="50" Text="Should"/>
        <TextBlock Height="50" Text="Determine"/>
        <TextBlock Height="50" Text="The"/>
        <TextBlock Height="50" Text="Height"/>
        <TextBlock Height="50" Text="Of"/>
        <TextBlock Height="50" Text="Parent"/>
    </StackPanel>
</Grid>

Upvotes: 4

Related Questions