ArcGIS Pro的控件样式_extensions:designonlyresourcedictionary extensions-CSDN博客

本文链接：https://blog.csdn.net/xiangqiang2015/article/details/83153033

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);
            }
        }