Halcon 学习笔记(4):导航首页

目录

• 前言
• 数据模板，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>();
   }