The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

 locked
ListView fill in RelativePanel RRS feed

  • Pergunta

  • I am to create a HamburgerMenu like Win10 apps. The HamburgerMenu base is the SplitView component and to distribute the children in SplitView I chose to use a RelativePanel, so I can choose which menu items will be on the top and which ones will be on the bottom, like Weather App.

    However, in my app the bottom items do not have the same width as the top items.

    I've tried several things, HorizontalAlignment="Stretch", binding between the top LitView and bottom ListView, but nothing changes. The bottom ListView ignores any non-manual (non-fixed) width setting. Below is my XAML code.

    <Grid x:Name="GridToMainPage">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <RelativePanel x:Name="RelatMainPanelTop" Background="#FFFF6800">
    
                <Button x:Name="HamburgerMenuButton" Content="&#xE700;" FontFamily="Segoe MDL2 Assets" FontSize="22" VerticalAlignment="Stretch" Background="#FFFF6800" Height="39.5" Width="{Binding CompactPaneLength, ElementName=MainSplitView}" Click="OnHaburgerButtonClick"/>
                <TextBlock x:Name="NavigationTitle" Text="Início" RelativePanel.RightOf="HamburgerMenuButton" Margin="10,0,0,0" FontSize="30" FontWeight="Bold"/>
                <TextBox x:Name="MainSearchTextBox" Width="200" PlaceholderText="Buscar" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.LeftOf="MainSearchButtom"/>
                <Button x:Name="MainSearchButtom" Content="&#xE1A3;" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" FontFamily="Segoe MDL2 Assets" FontSize="20" Margin="0,0,10,0"/>
    
            </RelativePanel>
    
            <SplitView x:Name="MainSplitView" Grid.Row="1" DisplayMode="CompactOverlay" CompactPaneLength="43" OpenPaneLength="{Binding Width, ElementName=HamburgerMenuListView1}">
                <SplitView.Pane>
                    <RelativePanel x:Name="MainSplitRelativPanel">
    
                        <ListView x:Name="HamburgerMenuListView1">
                            <ListViewItem x:Name="HomeSplittem">
                                <StackPanel x:Name="HomeStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="HomeIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE80F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="HomeTextSplitItem" FontSize="18" Text="Início" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="PersonsSplitItem">
                                <StackPanel x:Name="PersonsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="PersonsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE716;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="PersonsTextSplitItem" FontSize="18" Text="Pessoas" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MediaSplitItem">
                                <StackPanel x:Name="MediaStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MediaIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE8F1;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MediaTextSplitItem" FontSize="18" Text="Mídias" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MovementsSplitItem">
                                <StackPanel x:Name="MovementsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MovementsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE7BF;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MovementsTextSplitItem" FontSize="18" Text="Movimentações" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="CashDeskSplitItem">
                                <StackPanel x:Name="CashDeskStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="CashDeskIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE75F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="CashDeskTextSplitItem" FontSize="18" Text="Caixa" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ReportsSplitItem">
                                <StackPanel x:Name="ReportsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ReportsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xEB05;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="ReportsTextSplitItem" FontSize="18" Text="Relatórios" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ConfigSplitItem">
                                <StackPanel x:Name="ConfigStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ConfigIconSplitItem" FontSize="18" Text="&#xE90F;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="ConfiTextSplitItem" FontSize="18" Text="Configurações" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
    
                        </ListView>
    
                        <ListView x:Name="HambugerMenuListView2" RelativePanel.AlignBottomWithPanel="True"  HorizontalAlignment="Stretch" Margin="0,0,0,20" Width="181">
                            <ListViewItem x:Name="LoginSplitItem" HorizontalAlignment="Stretch">
                                <StackPanel x:Name="LoginStackPanelViewItem" Orientation="Horizontal" HorizontalAlignment="Stretch">
                                    <TextBlock x:Name="LoginIconSplitItem" FontSize="18" Text="&#xE8D7;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="LoginTextSplitItem" FontSize="18" Text="User Name" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
                        </ListView>
    
                    </RelativePanel>
                </SplitView.Pane>
            </SplitView>
        </Grid>

    sábado, 7 de janeiro de 2017 15:57

Respostas

  • Items in a RelativePanel are not stretched so you must set the width of the ListView explicitly. You could handle the SizeChanged event of the RelativPanel to make this dynamic:

            private void MainSplitRelativPanel_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                HambugerMenuListView2.Width = HamburgerMenuListView1.ActualWidth;
            }

    <RelativePanel x:Name="MainSplitRelativPanel" SizeChanged="MainSplitRelativPanel_SizeChanged">
    
                        <ListView x:Name="HamburgerMenuListView1">
                            <ListViewItem x:Name="HomeSplittem">
                                <StackPanel x:Name="HomeStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="HomeIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE80F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="HomeTextSplitItem" FontSize="18" Text="Início" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="PersonsSplitItem">
                                <StackPanel x:Name="PersonsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="PersonsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE716;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="PersonsTextSplitItem" FontSize="18" Text="Pessoas" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MediaSplitItem">
                                <StackPanel x:Name="MediaStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MediaIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE8F1;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MediaTextSplitItem" FontSize="18" Text="Mídias" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MovementsSplitItem">
                                <StackPanel x:Name="MovementsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MovementsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE7BF;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MovementsTextSplitItem" FontSize="18" Text="Movimentações" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="CashDeskSplitItem">
                                <StackPanel x:Name="CashDeskStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="CashDeskIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE75F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="CashDeskTextSplitItem" FontSize="18" Text="Caixa" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ReportsSplitItem">
                                <StackPanel x:Name="ReportsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ReportsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xEB05;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="ReportsTextSplitItem" FontSize="18" Text="Relatórios" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ConfigSplitItem">
                                <StackPanel x:Name="ConfigStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ConfigIconSplitItem" FontSize="18" Text="&#xE90F;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="ConfiTextSplitItem" FontSize="18" Text="Configurações" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
    
                        </ListView>
    
                        <ListView x:Name="HambugerMenuListView2" RelativePanel.AlignBottomWithPanel="True"  HorizontalAlignment="Stretch" Margin="0,0,0,20">
                            <ListViewItem x:Name="LoginSplitItem" HorizontalAlignment="Stretch">
                                <StackPanel x:Name="LoginStackPanelViewItem" Orientation="Horizontal" HorizontalAlignment="Stretch">
                                    <TextBlock x:Name="LoginIconSplitItem" FontSize="18" Text="&#xE8D7;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="LoginTextSplitItem" FontSize="18" Text="User Name" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
                        </ListView>
    
                    </RelativePanel>
    


    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    sábado, 7 de janeiro de 2017 18:25

Todas as Respostas

  • Items in a RelativePanel are not stretched so you must set the width of the ListView explicitly. You could handle the SizeChanged event of the RelativPanel to make this dynamic:

            private void MainSplitRelativPanel_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                HambugerMenuListView2.Width = HamburgerMenuListView1.ActualWidth;
            }

    <RelativePanel x:Name="MainSplitRelativPanel" SizeChanged="MainSplitRelativPanel_SizeChanged">
    
                        <ListView x:Name="HamburgerMenuListView1">
                            <ListViewItem x:Name="HomeSplittem">
                                <StackPanel x:Name="HomeStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="HomeIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE80F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="HomeTextSplitItem" FontSize="18" Text="Início" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="PersonsSplitItem">
                                <StackPanel x:Name="PersonsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="PersonsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE716;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="PersonsTextSplitItem" FontSize="18" Text="Pessoas" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MediaSplitItem">
                                <StackPanel x:Name="MediaStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MediaIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE8F1;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MediaTextSplitItem" FontSize="18" Text="Mídias" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="MovementsSplitItem">
                                <StackPanel x:Name="MovementsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="MovementsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE7BF;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="MovementsTextSplitItem" FontSize="18" Text="Movimentações" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="CashDeskSplitItem">
                                <StackPanel x:Name="CashDeskStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="CashDeskIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xE75F;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="CashDeskTextSplitItem" FontSize="18" Text="Caixa" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ReportsSplitItem">
                                <StackPanel x:Name="ReportsStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ReportsIconSplitItem" FontFamily="Segoe MDL2 Assets" FontSize="18" Text="&#xEB05;" VerticalAlignment="Center" SelectionHighlightColor="#FFFF6800"/>
                                    <TextBlock x:Name="ReportsTextSplitItem" FontSize="18" Text="Relatórios" Margin="12.5,0,0,0" SelectionHighlightColor="#FFFF6800"/>
                                </StackPanel>
                            </ListViewItem>
    
                            <ListViewItem x:Name="ConfigSplitItem">
                                <StackPanel x:Name="ConfigStackPanelViewItem" Orientation="Horizontal">
                                    <TextBlock x:Name="ConfigIconSplitItem" FontSize="18" Text="&#xE90F;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="ConfiTextSplitItem" FontSize="18" Text="Configurações" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
    
                        </ListView>
    
                        <ListView x:Name="HambugerMenuListView2" RelativePanel.AlignBottomWithPanel="True"  HorizontalAlignment="Stretch" Margin="0,0,0,20">
                            <ListViewItem x:Name="LoginSplitItem" HorizontalAlignment="Stretch">
                                <StackPanel x:Name="LoginStackPanelViewItem" Orientation="Horizontal" HorizontalAlignment="Stretch">
                                    <TextBlock x:Name="LoginIconSplitItem" FontSize="18" Text="&#xE8D7;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
                                    <TextBlock x:Name="LoginTextSplitItem" FontSize="18" Text="User Name" Margin="12.5,0,0,0"/>
                                </StackPanel>
                            </ListViewItem>
                        </ListView>
    
                    </RelativePanel>
    


    Hope that helps.

    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    sábado, 7 de janeiro de 2017 18:25
  • Why through binding does not work? I.e.

    <ListView x:Name="HamburgerMenuListView2" RelativePanel.AlignBottomWithPanel="True" Margin="0,0,0,20" Width="{Binding ActualWidth, ElementName=HamburgerMenuListView1, Mode=OneWay}">

    sábado, 7 de janeiro de 2017 21:24
  • Why through binding does not work? I.e.

    <ListView x:Name="HamburgerMenuListView2" RelativePanel.AlignBottomWithPanel="True" Margin="0,0,0,20" Width="{Binding ActualWidth, ElementName=HamburgerMenuListView1, Mode=OneWay}">


    Because the ActualWidth property does not raise property change notifications and should be thought of as a regular CLR property and not a dependency property as stated on MSDN here: https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.frameworkelement.actualwidth.aspx

    Hope that helps.

    Please remember to mark all helpful posts as answer and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    domingo, 15 de janeiro de 2017 17:29