目录
1、简介
WPF通过资源可以引用各种自定义的风格,使界面及其控件呈现出各种不同的风格。
ArcGIS Pro共有两种不同的主题风格:Light和Dark,ArcGIS Pro定制开发为了是用户开发出风格一致的自定义控件,在ArcGIS.Desktop.Framework程序集中封装了各种自定义的风格。
当我们添加Pro的控件模板时,在XAML文件中会发现其自动引用了封装好的风格。
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
2、Pro自定义的控件风格
2.1 预览
某位棒棒哒的同事梳理的成果:
<controls:ProWindow x:Class="MyProDemo.UI.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyProDemo.UI"
xmlns:controls="clr-namespace:ArcGIS.Desktop.Framework.Controls;assembly=ArcGIS.Desktop.Framework"
xmlns:extensions="clr-namespace:ArcGIS.Desktop.Extensions;assembly=ArcGIS.Desktop.Extensions"
mc:Ignorable="d"
Height="431.156" Width="681.407">
<controls:ProWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<extensions:DesignOnlyResourceDictionary Source="pack://application:,,,/ArcGIS.Desktop.Framework;component\Themes\Default.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</controls:ProWindow.Resources>
<Canvas>
<!--border-->
<Border BorderBrush="{DynamicResource Esri_TextControlBrush}" BorderThickness="5">
<Border.Effect>
<DropShadowEffect Color="{DynamicResource Esri_Color_Orange}" Opacity="0.4"/>
</Border.Effect>
</Border>
<!--label-->
<Label Content="Button:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="35,19,580,362" Height="20"></Label>
<Label Content="Checkbox:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="35,48,580,333" Height="20"></Label>
<Label Content="Combox:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="35,76,580,305" Height="20"></Label>
<Label Content="Datagrid:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="35,113,580,268" Height="20"></Label>
<Label Content="Expander:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="365,100,250,281" Height="20"></Label>
<Label Content="RadioButton:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="23,248,568,133" Height="20"></Label>
<Label Content="HyperLink:" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" Margin="28,205,575,176" Height="20" RenderTransformOrigin="0.489,-1.457"></Label>
<!--button-->
<Button Style="{DynamicResource Esri_Button}" Height="5" Margin="124,19,466,358">Esri_Button</Button>
<Button Style="{DynamicResource Esri_ButtonBorderless}" Height="5" Margin="222,19,308,358" RenderTransformOrigin="0.688,0.3">Esri_ButtonBorderless</Button>
<Button Style="{DynamicResource Esri_ButtonClose}" Height="29" Margin="370,16,271,356" Width="32" RenderTransformOrigin="0.441,0.52">Esri_ButtonClose</Button>
<Button Style="{DynamicResource Esri_ButtonBack}" Height="35" Margin="407,15,225,351" Width="41">Esri_ButtonBack</Button>
<Button Style="{DynamicResource Esri_ButtonBackSmall}" Height="30" Margin="453,15,194,356" Width="26" RenderTransformOrigin="0.102,0.449">Esri_ButtonBackSmall</Button>
<Button Style="{DynamicResource Esri_ButtonForwardSmall}" Height="24" Margin="490,19,157,358" Width="26" RenderTransformOrigin="1.098,0.022">Esri_ButtonForwardSmall</Button>
<Button Style="{DynamicResource Esri_ButtonUpSmall}" Height="26" Margin="526,19,117,356" Width="30">Esri_ButtonUpSmall</Button>
<Button Style="{DynamicResource Esri_ButtonDownSmall}" Height="23" Margin="561,20,76,358" Width="36">Esri_ButtonDownSmall</Button>
<Button Style="{DynamicResource Esri_ButtonUpSmallBorderless}" Height="24" Margin="602,21,45,356" Width="26" RenderTransformOrigin="0.263,0.345">Esri_ButtonUpSmallBorderless</Button>
<Button Style="{DynamicResource Esri_ButtonForwardSmallBorderless}" Height="24" Margin="628,21,15,356" Width="30" RenderTransformOrigin="0.009,0.471">Esri_ButtonForwardSmallBorderless</Button>
<!--checkbox-->
<CheckBox Content=" checkbox"
Margin="117,52,436,332"></CheckBox>
<CheckBox Content=" checkbox" Style="{DynamicResource Esri_CheckboxToggleSwitch}" IsChecked="True" Canvas.Left="222" Canvas.Top="53"/>
<!--combox-->
<ComboBox Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextControlBrush}" RenderTransformOrigin="2.264,0.352" Canvas.Left="117" Canvas.Top="74" Width="109">
<ComboBoxItem >Item1</ComboBoxItem>
<ComboBoxItem >Item2</ComboBoxItem>
<ComboBoxItem >Item3</ComboBoxItem>
</ComboBox>
<!--datagrid-->
<DataGrid Style="{DynamicResource Esri_DataGridHeaderless}"
ScrollViewer.CanContentScroll="True"
AutoGenerateColumns="True"
HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=GdbDefinitions}" Height="70" Canvas.Left="110" Canvas.Top="113" Width="165" />
<!--Expander-->
<Expander Style="{DynamicResource Esri_ExpanderBorderless}" Header="Esri_ExpanderBorderless" Margin="434,97,66,282"/>
<Expander Style="{DynamicResource Esri_Expander}" Header="Esri_Expander" Margin="431,122,69,248"/>
<Expander Style="{DynamicResource Esri_ExpanderGripper}" Header="Esri_ExpanderGripper" Margin="431,155,35,217"/>
<Expander Style="{DynamicResource Esri_ExpanderPlus}" Header="Esri_ExpanderPlus" Margin="431,189,35,183"/>
<Expander Style="{DynamicResource Esri_ExpanderGripperPlus}" Header="Esri_ExpanderGripperPlus" Margin="431,223,21,149"/>
<!--hyperlinks-->
<TextBlock Margin="104,207,431,171" >
<Hyperlink NavigateUri="https://www.baidu.com/" Click="Hyperlink_Click">TextBlock(hyperlinks)</Hyperlink>
</TextBlock>
<!--Radio Button-->
<RadioButton Content="RadioButton" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextInfoBrush}"
BorderBrush="{DynamicResource Esri_TextStyleSubduedBrush}" Margin="110,247,450,138" RenderTransformOrigin="0.5,0.5">
</RadioButton>
<RadioButton Content="RadioButton" Background="{DynamicResource Esri_BackgroundPressedBrush}"
Foreground="{DynamicResource Esri_TextInfoBrush}"
BorderBrush="{DynamicResource Esri_TextStyleSubduedBrush}" Margin="110,268,450,117" RenderTransformOrigin="0.5,0.5">
</RadioButton>
<!--listbox-->
<ListBox ItemContainerStyle="{DynamicResource Esri_ListBoxItemHighlightBrush}"
BorderBrush="{DynamicResource Esri_TextInfoBrush}" BorderThickness="2" RenderTransformOrigin="0.782,2.151" Width="158" Height="67" Canvas.Left="382" Canvas.Top="273">
<ListBoxItem>ListBox item 1</ListBoxItem>
<ListBoxItem>ListBox item 2</ListBoxItem>
<ListBoxItem>ListBox item 3</ListBoxItem>
</ListBox>
<ListBox Style="{DynamicResource Esri_ListBoxPanelIndicator}" IsSynchronizedWithCurrentItem="True"
Width="333" Height="94" Canvas.Left="28" Canvas.Top="297">
<ListBoxItem>ListBox item 1</ListBoxItem>
<ListBoxItem>ListBox item 2</ListBoxItem>
<ListBoxItem>ListBox item 3</ListBoxItem>
</ListBox>
</Canvas>
</controls:ProWindow>
2.2 视窗
加载项中的自定义窗口应从ArcGIS.Desktop.Framework.Controls.ProWindow派生,以继承正确样式的标题栏和背景(默认情况下,在Visual Studio中将派生自定义窗口System.Windows.Window)。但是Pro没有在Visual Studio中没有提供视窗的模板项,如果使用ProWindow,需要引用ArcGIS.Desktop.Framework.Controls命名空间。
<procontrl:ProWindow x:Class="TestDemo.ProAppModule.Controls.TestWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestDemo.ProAppModule.Controls"
xmlns:procontrl="clr-namespace:ArcGIS.Desktop.Framework.Controls;assembly=ArcGIS.Desktop.Framework"
mc:Ignorable="d"
Title="TestWindow" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125*"/>
<ColumnDefinition Width="21*"/>
</Grid.ColumnDefinitions>
</Grid>
</procontrl:ProWindow>
2.3 按钮样式
Name |
样式 |
使用位置 |
Esri_Button |
||
Esri_ButtonBorderless |
|
|
Esri_ButtonClose |
|
|
Esri_ButtonBack |
||
Esri_ButtonBackSmall |
||
Esri_ButtonForwardSmall |
||
Esri_ButtonUpSmall |
||
Esri_ButtonDownSmall |
|
|
Esri_ButtonUpSmallBorderless |
|
|
Esri_ButtonForwardSmallBorderless |
|
2.4 单选框
Default(默认) |
|
Esri_CheckboxToggleSwitch |
2.5 表格
Esri_DataGrid |
|
Esri_DataGridHeaderless |
|
Esri_DataGridRowHeaderless |
|
Esri_DataGridColumnHeader |
|
Esri_DataGridRowHeader |
|
Esri_DataGridRow |
|
Esri_DataGridCell |
|
2.6 Expander
2.7 Gallery
2.8 HyperLink
<TextBlock>
<Hyperlink NavigateUri="https://www.baidu.com/">
TextBlock(hyperlinks)
</Hyperlink>
</TextBlock>
2.9 TextBlock
2.x风格 | 1.4风格 | 描述 |
---|---|---|
Esri_TextBlockRegular | RegularText | 默认文字 |
Esri_TextBlockH1 | NA | H1内容标题 |
Esri_TextBlockH2 | NA | H2子内容标题 |
Esri_TextBlockH3 | H3TextBlock | H3内容标题 |
Esri_TextBlockH4 | H4TextBlock | H4子内容标题 |
Esri_TextBlockH5 | H5TextBlock | H5扩展器标头 |
Esri_TextBlockH6 | H6TextBlock | H6输入字段和表> |
Esri_TextBlockH7 | H7TextBlock | H7子文本 |
Esri_TextBlockDockPaneHeading | NA | Dockpane标题 |
Esri_TextBlockDockPaneHeader | DockPaneHeader | Dockpane Header |
Esri_TextBlockDialogHeader | NA | 对话框标题 |
Esri_TextBlockDialog | NA | 对话文字 |
Esri_TextBlockBackStageTitle | NA | 后台标题 |
Esri_TextBlockBackStageHeader | NA | 后台标题 |
Esri_TextBlockBackStageSubHeader | NA | 后台子标题 |
Esri_TextBlockBackStageGroupHeader | NA | 后台组头 |
3、Pro封装的窗体
3.1 消息框
3.2 通知框
Notification notification = new Notification();
protected override void OnClick()
{
try
{
if (Project.Current == null)
return;
notification.Title = "提示";
notification.Message = "XXXXXXXXXXXXXXXX";
notification.ImageUrl = @"pack://application:,,,/TDProAppModule;component/Resources/game32.png";
//notification.ImageUrl = @"file:///E:\我的代码\VS2017\WPF\bin\Images\Notebook32.png";
ArcGIS.Desktop.Framework.FrameworkApplication.AddNotification(notification);
}
catch (Exception ex)
{
ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show(ex.Message);
}
}