目錄
- 前言
- 資料模板，ListBox
- 觸發器
- 行為
- regoin使用
- 註冊regoin名稱空間，比如MainViewRegion
- Ioc獲取Resion管理器
- 新增跳轉命令
- 簡單邏輯
前言
這次主要是UI介面的學習和複習
資料模板，ListBox
ListBox算是最常用的資料模板了
- ListBox
- ListBox.ItemsPanel:佈局容器申明
- ListBox.ItemContainerStyle：
- Style,Property=Template:
- ControlTemplate TargetType="ListBoxItem"：子項樣式
- ContentPresenter：子項展示內容
- TemplateBinding：繫結模板控制元件對應屬性
- ContentPresenter：子項展示內容
- ControlTemplate TargetType="ListBoxItem"：子項樣式
- Style,Property=Template:
- 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>();
}