3
I m UWP 응용 프로그램 작업이 응용 프로그램에는 일부 제품 범주가 들어 있으며이 범주 안에는 다른 제품 목록이 만들어지며 최대 3 레벨 탐색입니다. 지금은 내비게이션의 사용을 포함하는 UWP 응용 프로그램 일하고
For ExampleUWP 응용 프로그램의 수직 멀티 레벨 탐색 메뉴
A
답변
2
. 기본 코드로 연결시켜 주면 필요에 따라 수정할 수 있습니다.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel Grid.Row="0" Background="Blue">
<Button x:Name="button" Content="" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Foreground="White" BorderBrush="{x:Null}" Background="{x:Null}" FontFamily="Segoe MDL2 Assets" RelativePanel.AlignLeftWithPanel="True" Click="button_Click"/>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Your App Name" Foreground="#FFF7F7F7" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.AlignRightWith="" RelativePanel.RightOf="button" Margin="10,0,0,0" FontSize="22"/>
</RelativePanel>
<SplitView x:Name="MySplitView" IsPaneOpen="False" OpenPaneLength="220" Grid.Column="0" PaneBackground="SkyBlue" Grid.Row="1" d:LayoutOverrides="LeftMargin, RightMargin, TopMargin, BottomMargin">
<SplitView.Pane>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView x:Name="_one" Margin="10,0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Tapped="TextBlock_Tapped" Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="_two" Grid.Column="1" Margin="10,0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Tapped="TextBlock_Tapped_1" Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="_three" Grid.Column="2" Margin="10,0">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Pane>
<Grid>
<TextBlock Text="Your Content" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="36"/>
</Grid>
</SplitView>
</Grid>
당신은 내가 'MySplitView'라는 이름의 SplitView 컨트롤이 볼 수 있듯이 :
그래서, 내 XAML은 다음과 같이 보인다.
창 및 눈금이 있습니다.
그리드에는 응용 프로그램의 내용이있는 반면 창에는 탐색이 있습니다.
창은 각 열에 ListView가 들어있는 세 개의 열로 나뉩니다.
세 개의 ListView에는 항목을 표시하는 간단한 TextBlock 컨트롤과 해당 항목을 기반으로하는 보조 또는 세 번째 하위 목록을 표시하는 TextBlock 컨트롤의 click 이벤트가 포함되어 있습니다.
코드 뒤에 다음과 같습니다
public List<string> mainList;
public List<SubItem> secondList, thirdList;
public BlankPage1()
{
this.InitializeComponent();
mainList = new List<string>();
mainList.Add("Main Item 1");
mainList.Add("Main Item 2");
mainList.Add("Main Item 3");
mainList.Add("Main Item 4");
mainList.Add("Main Item 5");
secondList = new List<SubItem>();
secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 1" });
secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 2" });
secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 3" });
secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 1" });
secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 2" });
secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 3" });
secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 1" });
secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 2" });
secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 3" });
secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 1" });
secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 2" });
secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 3" });
secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 1" });
secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 2" });
secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 3" });
thirdList = new List<SubItem>();
thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 1" });
thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 2" });
thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 3" });
thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 4" });
thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 1" });
thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 2" });
thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 3" });
thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 4" });
thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 1" });
thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 2" });
thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 3" });
thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 4" });
_one.ItemsSource = mainList;
}
public class SubItem
{
public string mainItem { get; set; }
public string subItem { get; set; }
}
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
//Main Item is clicked
//To show Second Item list
TextBlock tb = sender as TextBlock;
List<string> seconditems = new List<string>();
foreach(SubItem s in secondList)
{
if(s.mainItem == tb.Text)
{
seconditems.Add(s.subItem);
}
}
this._two.ItemsSource = seconditems;
this._two.UpdateLayout();
//In case the user clicks the Main Item when already Third list has items
_three.ItemsSource = null;
this._three.UpdateLayout();
//Set OpenPaneLength manually so Items look nice
MySplitView.OpenPaneLength = _one.Width + _two.Width + 50;
this.MySplitView.UpdateLayout();
}
private void button_Click(object sender, RoutedEventArgs e)
{
//To Open Close SplitView
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void TextBlock_Tapped_1(object sender, TappedRoutedEventArgs e)
{
// Secondary Item is clicked
// To show thirdlist
TextBlock tb = sender as TextBlock;
List<string> thirditems = new List<string>();
foreach (SubItem s in thirdList)
{
if (s.mainItem == tb.Text)
{
thirditems.Add(s.subItem);
}
}
this._three.ItemsSource = thirditems;
this._three.UpdateLayout();
//Set OpenPaneLength manually so Items look nice
MySplitView.OpenPaneLength = _one.Width + _two.Width + _three.Width+ 50;
this.MySplitView.UpdateLayout();
}
희망이 도움이됩니다.
좋은 하루 보내십시오.
감사합니다,
Raunaq 파텔