Halcon 學習筆記(4):導航首頁

gclove2000發表於2024-07-11
筆記

目錄
  • 前言
  • 資料模板，ListBox
  • 觸發器
  • 行為
  • regoin使用
    • 註冊regoin名稱空間，比如MainViewRegion
    • Ioc獲取Resion管理器
    • 新增跳轉命令
    • 簡單邏輯

前言

這次主要是UI介面的學習和複習

資料模板，ListBox

ListBox算是最常用的資料模板了

  • ListBox
    • ListBox.ItemsPanel:佈局容器申明
    • ListBox.ItemContainerStyle：
      • Style,Property=Template:
        • ControlTemplate TargetType="ListBoxItem"：子項樣式
          • ContentPresenter：子項展示內容
            • TemplateBinding：繫結模板控制元件對應屬性
    • ListBox.ItemTemplate：
      • DataTemplate：子項資料

舉例

 <!--ItemsSource,宣告資料來源-->
 <ListBox ItemsSource="{Binding NavigationMenuService.Items}"
          x:Name="listMenuBox"
          Grid.Column="1">
     <!--ItemsPanel,設定容器-->
     <ListBox.ItemsPanel>
         <ItemsPanelTemplate>
             <StackPanel Orientation="Horizontal" />
         </ItemsPanelTemplate>
     </ListBox.ItemsPanel>
     <!--ItemContainerStyle,設定子項樣式-->

     <ListBox.ItemContainerStyle>
         <Style TargetType="ListBoxItem">
             <Setter Property="FocusVisualStyle"
                     Value="{x:Null}" />
             <!--ItemContainerStyle,設定子項樣式模板-->
             <Setter Property="Template">
                 <Setter.Value>
                     <!--ControlTemplate,確定設定的是ListBoxItem-->

                     <ControlTemplate TargetType="ListBoxItem">
                         <Grid>
                             <Border x:Name="border" />
                             <Border x:Name="borderHeader"
                                     Background="{TemplateBinding Background}" />
                             <!--ContentPresenter,就是ListItem的代稱-->
                             <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                               TextBlock.Foreground="{TemplateBinding Foreground}" />
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </ListBox.ItemContainerStyle>
     <!--資料來源，其實就是上面的ContentPresenter -->
     <ListBox.ItemTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
                 <!--<md:PackIcon Kind="{Binding IconStr}"
                              Width="20"
                              Height="20" />-->
                 <TextBlock Text="{Binding Title}"
                            Margin="10,0"
                            FontSize="16" />
             </StackPanel>
         </DataTemplate>
     </ListBox.ItemTemplate>
 </ListBox>

觸發器

觸發器又好幾種，但是最簡單的就是Trigger。Wpf哪裡都好，就是太羅嗦了。注意，使用TargetName的時候，就沒有智慧提示了，只能手擼。要麼就在對應的地方觸發智慧提示然後複製貼上過來

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle"
                    Value="{x:Null}" />
            <!--ItemContainerStyle,設定子項樣式模板-->
            <Setter Property="Template">
                <Setter.Value>
                    <!--ControlTemplate,確定設定的是ListBoxItem-->

                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid>
                            <Border x:Name="border" />
                            <Border x:Name="borderHeader"
                                    Background="{TemplateBinding Background}" />
                            <!--ContentPresenter,就是ListItem的代稱-->
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              TextBlock.Foreground="{TemplateBinding Foreground}" />
                        </Grid>
                        <!--這裡使用TargetName 就沒有智慧提示了-->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected"
                                     Value="True">
                                <Setter TargetName="border"
                                        Property="BorderBrush"
                                        Value="#fff" />
                                <Setter TargetName="border"
                                        Property="BorderThickness"
                                        Value="0,0,0,3" />
                                <Setter TargetName="borderHeader"
                                        Property="Background"
                                        Value="#fff" />
                                <Setter TargetName="borderHeader"
                                        Property="Opacity"
                                        Value="0.1" />
                            </Trigger>
                            <Trigger Property="IsMouseOver"
                                     Value="True">

                                <Setter TargetName="border"
                                        Property="BorderBrush"
                                        Value="#fff" />
                                <Setter TargetName="border"
                                        Property="BorderThickness"
                                        Value="0,0,0,3" />
                                <Setter TargetName="borderHeader"
                                        Property="Background"
                                        Value="#fff" />
                                <Setter TargetName="borderHeader"
                                        Property="Opacity"
                                        Value="0.1" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

行為

我個人認為行為是相當於給event繫結觸發事件。他的用處就是方便Binding匯入CommandParameter。

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <i:InvokeCommandAction Command="{Binding NavigateCommand}"
                               CommandParameter="{Binding ElementName=listMenuBox,Path=SelectedItem}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

regoin使用

註冊regoin名稱空間，比如MainViewRegion

<!--註冊MainViewRegion-->
<ContentControl prism:RegionManager.RegionName="MainViewRegion"
                x:Name="MainViewContentControl" Grid.Row="1" />

Ioc獲取Resion管理器

        private readonly IRegionManager regionManager;


        public MainViewModel(IRegionManager regionManager)
        {
            this.regionManager = regionManager;
        }

新增跳轉命令

/// <summary>
/// 跳轉Regoin
/// </summary>
/// <param name="pageName">跳轉的pageName的名稱</param>
private void NavigatePage(string pageName)
{
    regionManager.Regions[regoin對應的名稱，比如之前我們定義的MainViewRegion]
        .RequestNavigate(pageName, callBack =>
        {
            //列印回撥函式，判斷region是否跳轉成功
            var result = callBack.Result;

            if (result == null) {
                Debug.WriteLine(callBack.Error.Message);
            }else if (!(bool)result)
            {
                Debug.WriteLine(callBack.Error.Message);

            }
        });
}

簡單邏輯

宣告：region，觸發regionManager跳轉功能，帶入regionName和跳轉對應的view。注意，我們這個必須提前Ioc註冊了才行

        /// <summary>
        /// Ioc注入
        /// </summary>
        /// <param name="services"></param>
   protected override void RegisterTypes(IContainerRegistry services)
   {
       services.RegisterForNavigation<MainView, MainViewModel>();
       services.RegisterForNavigation<DashboardView, DashboardViewModel>();
       services.RegisterSingleton<NavigationMenuService>();
   }

相關文章