locked
Stretch GridView to parent control bounds

    Question

  • I have a custom control where I place my SemanticZoom with GridView inside. The problem is that if GridView has only few items to display then width of the SemanticZoom is less than width of the container. As the result zoom in\out button is placed incorrectly in the middle of the screen.

    If there are many items to display, then GridView stretches itself up to the parent control bounds and everything is ok.

    How to stretch Semantic zoom (or inner GridView) properly even if there are only few items inside? 

    Custom container code:

    <controls:DataLoader Grid.RowSpan="2" >
                    <controls:DataLoader.DataContent>
                        <SemanticZoom x:Name="SemanticZoom"  Style="{StaticResource SemanticZoomStyle}"  Margin="0,0,0,0" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
                            <SemanticZoom.ZoomedOutView>
                                ..skipped..
                            </SemanticZoom.ZoomedOutView>
    
                            <SemanticZoom.ZoomedInView>
                                <GridView x:Name="ZoomedInView"
                                    ItemsSource="{Binding Source={StaticResource GroupedPatients}}" 
                                          ItemTemplate="{StaticResource PatientItemTemplate}" 
                                          Style="{StaticResource DataGridViewStyle}"
                                          behaviors:SelectionChangedCommandBehavior.Command="{Binding SelectPatientCommand}" Margin="0,0,0,0" 
                                          HorizontalAlignment="Stretch"  HorizontalContentAlignment="Stretch"
                                          Background="Yellow">
    
    
                                    <GridView.GroupStyle>
                                        <GroupStyle HeaderTemplate="{StaticResource PatientItemGroupHeaderTemplate}">
                                            <GroupStyle.Panel>
                                                <ItemsPanelTemplate>
                                                    <VariableSizedWrapGrid Orientation="Vertical"/>
                                                </ItemsPanelTemplate>
                                            </GroupStyle.Panel>
                                        </GroupStyle>
                                    </GridView.GroupStyle>
                                </GridView>
                            </SemanticZoom.ZoomedInView>
                        </SemanticZoom>
                    </controls:DataLoader.DataContent>

    GridView style:

    <Style x:Key="DataGridViewStyle" TargetType="GridView">
        <Setter Property="IsItemClickEnabled" Value="True"/>
        <Setter Property="SelectionMode" Value="None"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Width" Value="Auto"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
    </Style>
                </controls:DataLoader>

    Tuesday, May 27, 2014 1:30 PM

Answers

  • Hi,

    You can set the custom control HorizontalContentAlignment property to stretch, which can  stretche the child element to fill the allocated space of the parent element. Or you can give a width value to SemantiZoom Control. And you can share your a reproduce sample to SkyDrive, So that we can test it.

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, May 28, 2014 2:17 AM