2017-09-20 12 views
0

컨트롤을 계획하려면 https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/controls/hamburgermenu의 샘플 및 문서를 따르고 있습니다. 내비게이션 기능을 사용해보기 위해 페이지 하단의 코드를 복사했습니다. 당신이 햄버거 메뉴에서 특정 페이지에 대한 탐색을 사용하려면 그리고 문서가UWP Toolkit 햄버거 메뉴 탐색 기능이 작동하지 않는 것 같습니다.

을 제안, 우리는 HamburgerMenu 컨트롤의 XAML 콘텐츠의 프레임을 선언하는 것이 좋습니다.

빈 페이지를 작성하여 MenuItem 클래스에 연결하고 빈 페이지에 일부 텍스트가 포함 된 텍스트 블록 컨트롤을 넣습니다. 탐색 중에는 아무 것도 실제로 표시되지 않습니다. 라이브 비주얼 트리를 사용하여 응용 프로그램을 검사하면 빈 페이지가 표시되지만 텍스트는 어디에 있습니까?

enter image description here

누구 잘못이 무엇인지 몇 가지 제안이있다?

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

    <Page.Resources> 
     <DataTemplate x:Key="DefaultTemplate" x:DataType="local:MenuItem"> 
      <Grid Width="240" Height="48" HorizontalAlignment="Left"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="48" /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <SymbolIcon Grid.Column="0" Symbol="{x:Bind Icon, Mode=OneWay}" Foreground="White" /> 
       <TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" FontSize="16" VerticalAlignment="Center" Foreground="White" /> 
      </Grid> 
     </DataTemplate> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <controls:HamburgerMenu x:Name="hamburgerMenuControl" 
           PaneBackground="Black" 
           Foreground="White" 
           ItemTemplate="{StaticResource DefaultTemplate}" 
           ItemClick="OnMenuItemClick" 
           OptionsItemTemplate="{StaticResource DefaultTemplate}" 
           OptionsItemClick="OnMenuItemClick"> 
      <Frame x:Name="contentFrame"/> 
     </controls:HamburgerMenu> 
    </Grid> 

</Page> 

MainPage.xaml.cs를 :

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 

     hamburgerMenuControl.ItemsSource = MenuItem.GetMainItems(); 
     hamburgerMenuControl.OptionsItemsSource = MenuItem.GetOptionsItems(); 
    } 

    private void OnMenuItemClick(object sender, ItemClickEventArgs e) 
    { 
     var menuItem = e.ClickedItem as MenuItem; 
     contentFrame.Navigate(menuItem.PageType); 
    } 
} 

MenuItem.cs :

class MenuItem 
{ 
    public Symbol Icon { get; set; } 

    public string Name { get; set; } 

    public Type PageType { get; set; } 

    public static List<MenuItem> GetMainItems() 
    { 
     var items = new List<MenuItem>(); 

     items.Add(new MenuItem() { Icon = Symbol.Map, Name = "Item 1", PageType = typeof(Views.BlankPage) }); 
     items.Add(new MenuItem() { Icon = Symbol.BrowsePhotos, Name = "Item 2", PageType = typeof(Views.BlankPage) }); 
     return items; 
    } 

    public static List<MenuItem> GetOptionsItems() 
    { 
     var items = new List<MenuItem>(); 
     items.Add(new MenuItem() { Icon = Symbol.Setting, Name = "Settings", PageType = typeof(Views.BlankPage) }); 
     return items; 
    } 
} 
경우 당신은 내가

에서 MainPage.xaml 아래 내 모든 코드가 호기심 경우

BlankPage.xaml

<Page 
    x:Class="App1.Views.BlankPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App1.Views" 
    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}"> 
     <TextBlock FontSize="48">This is blank!</TextBlock> 
    </Grid> 
</Page> 
+1

텍스트 블록이 표시 영역 밖으로 나갔을 수 있습니다 .. 다른 컨트롤을 추가하려 했습니까? 아니면 페이지 격자 배경색을 변경하여 실제로 원하는 페이지로 이동했는지 확인 했습니까? – Pratyay

답변

0

BlankPage.xaml의 TextBlock이 흰색으로 설정된 HamburgerMenu에서 전경을 차지하므로 흰색 배경의 자연스러운 흰색 텍스트는 보이지 않습니다. <TextBlock FontSize="48" Foreground="Red">This is blank!</TextBlock>처럼 전경을 TextBlock에 명시 적으로 설정하면 표시됩니다.

+0

당신이 바로 여기에 있습니다! – hardywang