Windows Phone 8/8.1 Linke Seite Menü Panel Auflösung Problem

Question

Ich habe benutzerdefinierte Benutzersteuerung für linken Seite Panel erstellt.

Hier ist mein userControl.xaml Code

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

    <Grid x:Name="LayoutRoot" Background="Transparent"> 
     <Grid x:Name="SettingsPane" Background="#FFDEDCDB" Grid.Row="0" Margin="-800,0,0,0" Width="400"> 
      // I will add here left side menu Items later 
     </Grid> 
     <Grid x:Name="TopHeader"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="60*"/> 
       <RowDefinition Height="580*"/> 
      </Grid.RowDefinitions> 
      <Grid Grid.Row="0" Background="#7d0a09"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="61*"/> 
       </Grid.ColumnDefinitions> 
       <Border Grid.Column="0" BorderThickness="0 0 1.5 0" BorderBrush="#FF852727"> 
        <Grid x:Name="grdHovertap" x:FieldModifier="public" Grid.Column="0"> 
         <Image Name="imgHovertabs" Source="/Assets/icons/icon_bars.png" Style="{StaticResource menuBarImage}" ></Image> 
        </Grid> 
       </Border> 
      </Grid> 
     </Grid> 
    </Grid> 
</UserControl> 

ich diese Benutzerkontrolle meines MainPage.xaml

<Grid Grid.Row="0" Grid.RowSpan="2"> 
    <userControls:NavigationbarControl x:Name="nvBarHeader"></userControls:NavigationbarControl> 
</Grid> 

Das ist mein MainPage.xaml.cs hinzugefügt habe Code

private FrameworkElement _feContainer; 
public MainPage() 
{ 
    InitializeComponent(); 
    _feContainer = MainLayout as FrameworkElement; 
    nvBarHeader.menuPanalName.Text = "Dashboard"; 
    nvBarHeader.menuPanalName.FontSize = 25; 
    nvBarHeader.grdHovertap.Tapped += GrdHovertap_Tapped; 
    //back key pressed 
    //This should be written here rather than the contructor 
    HardwareButtons.BackPressed += HardwareButtons_BackPressed; 
} 
private void GrdHovertap_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e) 
{ 
    if (_isSettingsOpen) 
    { 
     CloseSettings(); 
    } 
    else 
    { 
     OpenSettings(); 
    } 
} 
private void OpenSettings() 
{ 
    var trans = _feContainer.GetHorizontalOffset().Transform; 
    trans.Animate(trans.X, 400, "X", 300, 0, new CubicEase 
    { 
     EasingMode = EasingMode.EaseOut 
    }); 

    _isSettingsOpen = true; 
} 

Hier im Code habe ich _feContainer = MainLayout as FrameworkElement; eingestellt. MainLayout ist meine MainPage Grid object. Ich habe .Animate als Erweiterungsmethode erstellt. In meinem usercontrol siehst du, dass ich Margin und Width und trans.Animate - 400 fest codiert habe. Aber das Problem ist, wenn ich dies auf verschiedene Auflösungen von windows phone ausführen. Es funktioniert nicht richtig. Ich möchte diese Eigenschaft dynamisch setzen. Kann mir jemand helfen, das zu lösen? Ich verstehe nicht, wie ich das machen kann.

EDIT

ich so etwas zu setzen versuchen.

var scaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel; 
var width = Math.Round(Window.Current.Bounds.Width * scaleFactor); 
SettingsPane.Width = Math.Round(width/2); 
SettingsPane.Margin = new Thickness(-width, 0, 0, 0); 

und in Mainpage OpenSettings Methode statt 400 ich SettingsPane.Width setze. Aber die Dinge funktionieren nicht so, wie ich es möchte. Ich bin wirklich darauf fest.

Answer 1

Bitte gehen Sie über diesen Link Navigation Drawer. Ich denke, so wird es Ihre Anforderung erfüllen.