Estoy trabajando en Visual Studio 2015 e intentando hacer una navegación estilo hamburguesa ... pero los elementos del panel de la vista dividida obtienen automáticamente un margen y no se apilan correctamente debajo del botón de hamburguesa [mira la imagen adjunta]. Quiero que se apilen correctamente debajo del botón Hamburguesa en el extremo izquierdo de la cuadrícula. Quiero usar el cuadro de lista para que cuando el usuario navegue a una página diferente, permanezca seleccionado / resaltado, por lo que no puedo eliminarlo. He adjuntado el código MainPage.xaml y el código del estilo que he usado. Espero que me ayuden ... ¡Gracias!

<Page
x:Class="MathAssistant.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MathAssistant"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button Name="HBbutton" Click="HBbutton_Click" Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"  FontSize="25" Background="BlueViolet"/>

    <TextBlock Name="Heading" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center"  FontSize="36" Foreground="CornflowerBlue" />

    <SplitView Grid.Row="1" 
               Grid.ColumnSpan="2"
               Name="Menu"
               DisplayMode="CompactOverlay" 
               OpenPaneLength="270" 
               CompactPaneLength="56">
        <SplitView.Pane>
            <ListBox SelectionMode="Single" 
                     SelectionChanged="MenuListBox_SelectionChanged">
                <ListBoxItem Name="MenuItemUnitConverter">
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="0" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
                        <TextBlock FontSize="24" Margin="20,0,0,0">
                            <Run Text="Unit Converter"/>
                        </TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem Name="MenuItemCalculator" >
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="0" Source="Assets/calculatorlogo.png" Style="{StaticResource SplitviewLogoStyle}"/>
                        <TextBlock FontSize="24" Margin="20,0,0,0">Calculator</TextBlock>
                    </StackPanel>
                </ListBoxItem>
            </ListBox>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MyFrame" Grid.Column="1" Grid.Row="1"></Frame>
        </SplitView.Content>
    </SplitView>

</Grid>
<Application.Resources>
    <Style TargetType="Image" x:Key="SplitviewLogoStyle">
        <Setter Property="Height" Value="50" />
        <Setter Property="Width" Value="45" />
    </Style>

This is a screenshot of the designer view

0
Pratyush Pareek 15 ene. 2017 a las 21:31

1 respuesta

La mejor respuesta

ListBoxItem tiene un relleno predeterminado (que es lo opuesto a un margen) de "12,11,12,13". Intente configurar el Padding de ListBoxItems en 0, entonces debería estar alineado a la izquierda. Para colocarlo en el centro, puede hacer algo como esto:

<ListBoxItem Name="MenuItemUnitConverter" Padding="0">
    <StackPanel Orientation="Horizontal">
        <Image Margin="4" Source="Assets/unitconverterlogo.png" Style="{StaticResource SplitviewLogoStyle}" />
        <TextBlock FontSize="24" Margin="20,0,0,0">
            <Run Text="Unit Converter"/>
        </TextBlock>
    </StackPanel>
</ListBoxItem>

Y modifique el estilo para que el margen de la imagen a la izquierda + ancho + margen de la imagen a la derecha = SplitView.Width (4 + 48 + 4 = 56):

<Style TargetType="Image" x:Key="SplitviewLogoStyle">
    <Setter Property="Height" Value="50" />
    <Setter Property="Width" Value="48" />
</Style>
0
DevAttendant 16 ene. 2017 a las 14:32
Lo siento schumi1331 ... sigue siendo el mismo
 – 
Pratyush Pareek
16 ene. 2017 a las 12:59
¿Ha agregado un relleno? Me di cuenta de que olvidé mi código, así que lo actualicé.
 – 
DevAttendant
16 ene. 2017 a las 14:33