1. 홈
  2. 질의 응답
  3. WPF 스크롤 메뉴

WPF 스크롤 메뉴

2013-06-07 2 views
0

Windows Media Center의 음악 라이브러리 인터페이스와 같은 WPF 메뉴 구조를 만들고 싶습니다. 기본적으로 전제에는 범주 및 항목 목록이 있습니다. 왼쪽/오른쪽 화살표 키를 사용하여 범주를 스크롤 할 수 있습니다. 사용 가능한 범주는 화면에서 "줄 바꿈"되며 목록의 두 번째 항목은 항상 선택된 항목입니다. 해당 범주의 사용 가능한 항목은 범주 아래의 목록에 있습니다. 범주에있는 동안 아래쪽 화살표를 눌러 목록으로 이동하면 위의 범주에서 글꼴 크기를 '떨어 뜨리고'tad를 사라지게하고 목록 항목을 사용하여 글꼴 크기를 표시하고 사라지게 할 수 있습니다 태드에서. 항목 목록에서 항목을 왼쪽, 오른쪽, 위, 아래로 탐색 할 수 있습니다. 항목의 맨 위 행을 누르면 카테고리 목록으로 돌아가서 글꼴 크기가 팝업되고 항목이 글꼴 크기 아래로 팝업됩니다.WPF 스크롤 메뉴

나는 총 WPF 멍청한 놈입니다 ... 어떤 지침을 주시면 감사하겠습니다.

WMC Category Navigation WMC Item Navigation

출처

2013-06-07 codechurn

+0

그래서 이것을 달성하기 위해 지금까지 무엇을 시도 했습니까? WPF에 익숙하지 않다면 WPF로 기본 UI 디자인에 익숙하지 않아도 될 것입니다. 그러나 꽤 많은 것들이 포함될 수있는 완전한 앱을 복제하는 데 곧바로 뛰어 들어 왔습니다. 이것에 대한 나의 전형적인 대답은 "Yeh 전적으로 할 수있는"라인을 따르고,'ItemsControl'에는'PanelTemplate'으로'WrapPanel'을,'Canvas' 내에서 필요한 애니메이션을'Storyboard'에 첨부하기 위해'ItemTemplate'을 가지고 있습니다. 배경". – Viv

답변

2

내가 뭔가를했다 : -

좋은 예는 WMC 음악 라이브러리 인터페이스를 시도하는 것입니다, 그러나 그것은 설치하지 않은 분들을 위해, 나는 몇 스크린 샷을 포함했다 :

내가 TabControl에 요소 했다 기지에 대한 enter image description here

, 귀하의 스크린 샷으로 그는 가장 적합합니다. 게다가, TabItem의 모든 컨트롤 (예 : DataGrid) 일 수 있습니다. 먼저 TabItem의 탐색 화살표 (카테고리를 나타냄)를 추가해야하며 선택되지 않은 TabItem을 숨길 필요가 있습니다. 제대로하려면, 당신은 TabItem의 (App.xaml)의 템플릿을 수행해야합니다 화살표 버튼

<Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}"> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="Foreground" Value="Gray" /> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
     <Setter Property="MinHeight" Value="20" /> 
     <Setter Property="MinWidth" Value="120" /> 
     <Setter Property="FontFamily" Value="./#Segoe UI" /> 
     <Setter Property="FontSize" Value="14" /> 
     <Setter Property="FontWeight" Value="Normal" />    
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <Border SnapsToDevicePixels="True" Name="Border" Margin="0,0,2,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"> 
         <Grid> 
          <!-- There are arrow Prev and Next --> 
          <Button Name="PrevButton" Style="{StaticResource PrevButton}" /> 
          <ContentPresenter Name="ContentSite" HorizontalAlignment="Center" Margin="5" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" /> 
          <Button Name="NextButton" Style="{StaticResource NextButton}" /> 
         </Grid> 
        </Border> 

        <ControlTemplate.Triggers> 
         <Trigger Property="TabStripPlacement" Value="Bottom"> 
          <Setter TargetName="Border" Property="CornerRadius" Value="0" /> 
         </Trigger> 

         <Trigger Property="TabStripPlacement" Value="Left"> 
          <Setter TargetName="Border" Property="CornerRadius" Value="0" /> 
         </Trigger> 

         <!-- Here is hiding the arrows --> 
         <Trigger Property="IsSelected" Value="False"> 
          <Setter TargetName="PrevButton" Property="Visibility" Value="Collapsed" /> 
          <Setter TargetName="NextButton" Property="Visibility" Value="Collapsed" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 

     <Style.Triggers> 
      <Trigger Property="IsSelected" Value="True"> 
       <Setter Property="Background" Value="#F4F4F4" /> 
       <Setter Property="Foreground" Value="Black" /> 
       <Setter Property="FontSize" Value="16" /> 
      </Trigger> 

      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Background" Value="Black" /> 
       <Setter Property="Foreground" Value="White" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style>

스타일 (App.xaml) :

<!-- Prev button style --> 
    <Style x:Key="PrevButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="Margin" Value="3,0,0,0" /> 
     <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
     <Setter Property="ToolTip" Value="Prev" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}"> 
         <Grid> 
          <ContentPresenter RecognizesAccessKey="True" /> 
          <Path x:Name="PrevButton" SnapsToDevicePixels="True" Width="13" Height="16" Stretch="Fill" Fill="Gray" Data="F1 M 35.8724,37.6042L 39.0391,40.7708L 50.5182,51.8542L 40.2266,51.8542L 25.1849,37.6041L 40.2266,23.3542L 50.5182,23.3542L 39.0391,34.4375L 35.8724,37.6042 Z " /> 
         </Grid> 
        </Border> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="PrevButton" Property="Fill" Value="Black" /> 
         </Trigger> 

         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="PrevButton" Property="Fill" Value="Green" /> 
         </Trigger> 

         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Opacity" Value="0.6" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- Next button style --> 
    <Style x:Key="NextButton" TargetType="{x:Type Button}"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="HorizontalAlignment" Value="Right" /> 
     <Setter Property="Margin" Value="0,0,3,0" /> 
     <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
     <Setter Property="ToolTip" Value="Next" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}"> 
         <Grid> 
          <ContentPresenter RecognizesAccessKey="True" /> 
          <Path x:Name="NextButton" SnapsToDevicePixels="True" Width="13" Height="16" Stretch="Fill" Fill="Gray" Data="F1 M 39.8307,37.6042L 36.6641,34.4375L 25.1849,23.3542L 35.4766,23.3542L 50.5182,37.6042L 35.4766,51.8542L 25.1849,51.8542L 36.6641,40.7708L 39.8307,37.6042 Z " /> 
         </Grid> 
        </Border> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="NextButton" Property="Fill" Value="Black" /> 
         </Trigger> 

         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="NextButton" Property="Fill" Value="Green" /> 
         </Trigger> 

         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Opacity" Value="0.6" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

메인 창 XAML :

를 

<TabControl Name="SampleTabControl" HorizontalAlignment="Right" Loaded="TabControl_Loaded"> 
     <TabItem Name="Soccer" Header="Soccer"> 
      <ListBox Name="SoccerListBox" BorderBrush="Transparent" BorderThickness="0"> 
       <ListBoxItem>Player name: Ronaldo</ListBoxItem> 
       <ListBoxItem>Player name: Messi</ListBoxItem> 
       <ListBoxItem>Player name: Sergio Ramos</ListBoxItem> 
       <ListBoxItem>Player name: Puyol</ListBoxItem> 
      </ListBox> 
     </TabItem> 

     <TabItem Name="Hockey" Header="Hockey"> 
      <ListBox Name="HockeyListBox" BorderThickness="0"> 
       <ListBoxItem>Player name: Cal Heeter</ListBoxItem> 
       <ListBoxItem>Player name: Jeff Petry</ListBoxItem> 
       <ListBoxItem>Player name: Erik Johnson</ListBoxItem> 
       <ListBoxItem>Player name: Matt Hunwick</ListBoxItem> 
      </ListBox> 
     </TabItem> 

     <TabItem Name="Basketbol" Header="Basketbol"> 
      <ListBox Name="BasketbolListBox" BorderThickness="0"> 
       <ListBoxItem>Player name: Kobe Bryant</ListBoxItem> 
       <ListBoxItem>Player name: Chris Paul</ListBoxItem> 
       <ListBoxItem>Player name: Carmelo Anthony</ListBoxItem> 
       <ListBoxItem>Player name: LeBron James</ListBoxItem> 
      </ListBox> 
     </TabItem> 

     <TabItem Name="Baseball" Header="Baseball"> 
      <ListBox Name="BaseballListBox" BorderThickness="0"> 
       <ListBoxItem>Player name: Ralph Kiner</ListBoxItem> 
       <ListBoxItem>Player name: Dizzy Dean</ListBoxItem> 
       <ListBoxItem>Player name: Duke Snider</ListBoxItem> 
       <ListBoxItem>Player name: Ozzie Smith</ListBoxItem> 
      </ListBox> 
     </TabItem> 
    </TabControl>

이제 기능적인 화살표 작업자를 만들어야합니다. 이를 위해, 우리는 템플릿에서 버튼을 찾아내는 TabControl_Loaded 이벤트를 생성하고 이벤트 처리기에 할당 :

private void TabControl_Loaded(object sender, RoutedEventArgs e) 
    { 
     var items = SampleTabControl.Items; 

     foreach (TabItem item in items) 
     { 
      Button MyPrevButton = (Button)item.Template.FindName("PrevButton", item); 
      Button MyNextButton = (Button)item.Template.FindName("NextButton", item); 

      MyPrevButton.Click += new RoutedEventHandler(MyPrevButton_Click); 
      MyNextButton.Click += new RoutedEventHandler(MyNextButton_Click); 
     } 
    }

이벤트 핸들러 : 네비게이션 기능의 편의를 위해

private void MyPrevButton_Click(object sender, RoutedEventArgs e) 
    { 
     NavigationTabItem(SampleTabControl, "Prev", 1); 
    } 

    private void MyNextButton_Click(object sender, RoutedEventArgs e) 
    { 
     NavigationTabItem(SampleTabControl, "Next", 1); 
    }

만들어졌습니다 :

private void NavigationTabItem(TabControl MyTabControl, string Direction, int Num) 
    { 
     if (Direction == "Prev") 
     { 
      MyTabControl.SelectedIndex -= Num; 
     } 

     if (Direction == "Next") 
     { 
      MyTabControl.SelectedIndex += Num; 
     } 
    }

이제 우리는 키보드 인터페이스를 가로 챌 필요가 있습니다. 이렇게하려면 핸들러가 창에 생성 및 설치 (을 TabControl에 설치하는 것이 좋습니다, 그리고 프로그램이 넣어 시작할 때 그것은 초점) :

<Window ... KeyDown="SampleTabControl_KeyDown"> 

    private void SampleTabControl_KeyDown(object sender, KeyEventArgs e) 
    { 
     if (e.Key == Key.Down) 
     { 
      if (SampleTabControl.SelectedIndex == 0) 
      { 
       SoccerListBox.Focus(); 
      } 

      if (SampleTabControl.SelectedIndex == 1) 
      { 
       HockeyListBox.Focus(); 
      } 

      if (SampleTabControl.SelectedIndex == 2) 
      { 
       BasketbolListBox.Focus(); 
      } 

      if (SampleTabControl.SelectedIndex == 3) 
      { 
       BaseballListBox.Focus(); 
      } 
     } 

     if (e.Key == Key.Left) 
     { 
      NavigationTabItem(SampleTabControl, "Prev", 1); 
     } 

     if (e.Key == Key.Right) 
     { 
      NavigationTabItem(SampleTabControl, "Next", 1); 
     } 
    }

ListBoxItem의에 애니메이션을 선택하는 설정으로 선택 및 TabItem.

출처

2013-06-07 08:45:00

+0

놀라운 예를 들어 주셔서 감사합니다. – codechurn

관련 문제

 관련 문제