ArcGIS Pro的控制元件樣式
阿新 • • 發佈：2018-11-16
目錄
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);
}
}3.3 資料載入窗
3.4 目錄選擇窗
