ArcGIS Pro的控件样式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiangqiang2015/article/details/83153033

目录

1、简介

 2、Pro自定义的控件风格

2.1 预览

2.2 视窗

2.3 按钮样式

2.4 单选框

2.5 表格

2.6 Expander

2.7 Gallery

2.9 TextBlock

3、Pro封装的窗体

3.1 消息框

3.2 通知框

3.3 数据加载窗

3.4 目录选择窗

参考地址


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

<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 目录选择窗

参考地址:

https://github.com/Esri/arcgis-pro-sdk/wiki/proguide-style-guide

猜你喜欢

转载自blog.csdn.net/xiangqiang2015/article/details/83153033
今日推荐