CODEWITHSUNDEEP
xamluwpuwp-xaml
Terrence
Terrence

Reputation: 2804

UWP XAML GridView to Fill Vertical space

I have a page with 2 columns Each column has controls contained in stackpanels The stackpanel is contained in a boarder.

border stackpanel ..... gridview /stackpanel /boarder

I want the boarder to fill the vertical height without setting the minheight to a pixel value.

Meaning I do not want the boarder to grow and shrink with the gridview, it should stay the same size, filling the colunm and respecting its margins.

<StackPanel x:Name="RightColumn"
        Grid.Column="1" 
        Margin="10,20,20,20">

    <TextBlock FontWeight="Bold" Text="Tags" />

    <Border BorderBrush="{StaticResource DGreen}"
        MinHeight="500"
            BorderThickness="2" 
            Padding="10">
        <StackPanel >

            <TextBox Width="120"
                HorizontalAlignment="Left"
                KeyDown="{x:Bind ViewModel.AddNewTag}"
                PlaceholderText="Add New Tag"
                Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />

            <TextBlock Margin="0,10,0,0"
                FontWeight="Bold"
                Text="Add Tags from this list" />

            <GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
                ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
                SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">

                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="dat:TagDTO">
                        <Border Width="90" Background="{StaticResource DGreen}">
                            <TextBlock Margin="3"
                                Foreground="{StaticResource ContrastColorBrush}"
                                Text="{x:Bind TagName}" />
                        </Border>
                    </DataTemplate>
                </GridView.ItemTemplate>

            </GridView>

        </StackPanel>

    </Border>

</StackPanel>

Upvotes: 1

Views: 781

Answers (1)

AVK
AVK

Reputation: 3923

Change your First StackPanel to Grid. so that It can fill the complete available space. TextBox will go to first Row which is set as Auto and Second Border should go to Second Row which is set as *.

Below is a mockup from your example. 

<Grid x:Name="RightColumn"
        Grid.Column="1" 
        Margin="10,20,20,20">

        <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <TextBlock FontWeight="Bold" Text="Tags" Grid.Row="0" />

    <Border BorderBrush="{StaticResource DGreen}" Grid.Row="1"
            MinHeight="500" BorderThickness="2" Padding="10">
        <StackPanel>
            <TextBox Width="120"
                HorizontalAlignment="Left"
                KeyDown="{x:Bind ViewModel.AddNewTag}"
                PlaceholderText="Add New Tag"
                Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
            <TextBlock Margin="0,10,0,0"
                FontWeight="Bold"
                Text="Add Tags from this list" />
            <GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
                ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
                SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="dat:TagDTO">
                        <Border Width="90" Background="{StaticResource DGreen}">
                            <TextBlock Margin="3"
                                Foreground="{StaticResource ContrastColorBrush}"
                                Text="{x:Bind TagName}" />
                        </Border>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </StackPanel>
    </Border>
</Grid>

Upvotes: 2

Related Questions