c# - example - ¿Por qué el contenido y el Panel de mi SplitView están en la misma área?

xaml c# tutorial español

Question

He estado buscando y buscando ejemplos todo el día y no puedo encontrar la solución para mi problema. Tengo un SplitView con un menú de hamburguesas en su Panel, y estoy cargando un marco para cada uno de los ListBoxItems seleccionados. Pero cuando se carga mi página, se ve algo así (el área naranja es el fondo de la página): También me pregunto cómo puedo configurar cualquiera de mis marcos para que se carguen al inicio, intenté establecer TodayListBoxItem en IsSelected = "true" e IsEnabled = "true", pero todo lo que obtengo es la misma página de inicio que se muestra arriba, pero el elemento TodayListBoxItem está seleccionado. Aquí está mi XAML:

<Page
x:Class="Hamburger.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hamburger"
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="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" />
<TextBlock Name="PageTitle" FontSize="30" Margin="70,0,0,0"></TextBlock>
</RelativePanel>
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactInline"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single"
Name="IconsListBox"
SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="TodayListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE909;" />
<TextBlock Text="Today" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="ForecastListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE8F5;" />
<TextBlock Text="Forecast" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="SettingsListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE713;" />
<TextBlock Text="Settings" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content >
<Frame Name="ContentFrame" Background="Tomato" HorizontalAlignment="Stretch" />
</SplitView.Content>
</SplitView>
</Grid>
</Page>

Y aquí está mi xaml.cs:

namespace Hamburger
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (TodayListBoxItem.IsSelected)
{
PageTitle.Text = "Today";
ContentFrame.Navigate(typeof(TodayPage));
/*
Trying to use a method in TodayPage so that it shows the current
weather
*/
}
else if (ForecastListBoxItem.IsSelected)
{
PageTitle.Text = "Forecast";
ContentFrame.Navigate(typeof(ForecastPage));
}
else if (SettingsListBoxItem.IsSelected)
{
PageTitle.Text = "Settings";
ContentFrame.Navigate(typeof(SettingsPage));
}
}
}
}

Answer 1

El problema está dentro de la definición de su SplitView .

<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactInline"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">

Como está utilizando HorizontalAlignment="Left" , le está diciendo a SplitView que "solo tome el ancho que necesita para ajustarse a mi contenido". Como inicialmente no hay contenido, tendrá un ancho de hasta 200px ya que ese es el ancho que necesita para OpenPaneLength .

Simplemente elimine HorizontalAlignment (ya que es Stretch por defecto).

<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactInline"
OpenPaneLength="200"
CompactPaneLength="56">

Bonificación: si quieres simular un evento de selección cambiado para cargar una página en la carga inicial, hay varias opciones. Una de ellas es seleccionar un elemento después de cargar la página:

 public MainPage()
{
this.InitializeComponent();
this.Loaded += (sender, args) => IconsListBox.SelectedItem = IconsListBox.Items.First();
}