ProWindow does not get ESRI styling

640
2
Jump to solution
11-11-2021 12:54 PM
AlanStewart
Occasional Contributor

Pro SDK 2.6

Creating a XAML dialog using ProWindow.

The controls I place in  the window are not getting the same styling as do the same controls in the Pro UI. (I'm in the middle of upgrading this to support dark mode.) Is there a way to do that without manually styling controls as you will see I have started in the code below?  (See Windows.Resources for example)

<controls:ProWindow x:Class="publisher_arcgispro.UI.Export.Export.MapSeriesDlg"
        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:publisher_arcgispro.UI.Export.Export"
        xmlns:controls="clr-namespace:ArcGIS.Desktop.Framework.Controls;assembly=ArcGIS.Desktop.Framework"
        xmlns:contracts="clr-namespace:ArcGIS.Desktop.Framework.Contracts;assembly=ArcGIS.Desktop.Framework"
        mc:Ignorable="d"
        Title="Test Dialog"
        ResizeMode="NoResize"
        WindowStartupLocation="CenterOwner"
        SizeToContent="WidthAndHeight" >

    <Window.Resources>
            <Style x:Key="GenericControlStyle" TargetType="Control" >
                <Setter Property="Foreground" Value="{DynamicResource Esri_TextControlBrush}"></Setter>
                <Setter Property="Background" Value="{DynamicResource Esri_ControlBackgroundBrush}"></Setter>
                <Setter Property="BorderBrush" Value="{DynamicResource Esri_ControlBackgroundBrush}"></Setter>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="Label">
                <Setter Property="Height" Value="20"/>
                <Setter Property="Margin" Value="0,0,0,0"></Setter>
                <Setter Property="Padding" Value="0"></Setter>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="Expander">
                <Setter Property="Margin" Value="0,5,0,5"/>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="Button">
                <Setter Property="Height" Value="20"/>
                <Setter Property="Width" Value="75"/>
                <Setter Property="Margin" Value="5,0,0,0"/>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="RadioButton">
                <Setter Property="Margin" Value="5,5,0,5"/>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="CheckBox">
                <Setter Property="Margin" Value="15,0,0,0"/>
            </Style>
            <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="TextBox">
                <Setter Property="Height" Value="20"/>
                <Setter Property="Margin" Value="10,0,0,5"/>
                <Setter Property="Padding" Value="0"/>
            </Style>
        <Style BasedOn="{StaticResource GenericControlStyle}" TargetType="ComboBox">
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="Block.Foreground" Value="{DynamicResource Esri_TextControlBrush}"></Setter>
            <Setter Property="Block.Background" Value="{DynamicResource Esri_ControlBackgroundBrush}"></Setter>
            <Setter Property="Block.BorderBrush" Value="{DynamicResource Esri_ControlBackgroundBrush}"></Setter>
        </Style>
    </Window.Resources>
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.Resources>
        </Grid.Resources>
        <Grid.DataContext>
            <Binding Path="MapSeriesDlgModel" />
        </Grid.DataContext>

        <Expander Header="Pages"
                  Grid.Row="0"
                  Grid.Column="0"
                  IsExpanded="True">
            <StackPanel>
                <RadioButton Name="AllPagesRB"
                             GroupName="PagesRBGroup"
                             Checked="PagesSelectedChanged"/>
                <RadioButton Name="CurrentPageRB"
                             GroupName="PagesRBGroup"
                             Checked="PagesSelectedChanged"/>
                <RadioButton Name="SelectedFeaturesRB"
                             GroupName="PagesRBGroup"
                             Checked="PagesSelectedChanged"/>
                <CheckBox Name="ShowSelectionCB"
                          Content="Show selection synmbology for index features"
                          Checked="ShowSelectionChanged"
                          IsEnabled="{Binding ElementName=SelectedFeaturesRB, Path=IsChecked}" /> 
                <!--<RadioButton Name="SelectedPagesRB"
                             GroupName="PagesRBGroup"
                             Checked="PagesSelectedChanged"/>-->
                <RadioButton Name="PageRangeRB"
                             Content="Page range (for example: &quot;1, 3, 5-12&quot;)"
                             GroupName="PagesRBGroup"
                             Checked="PagesSelectedChanged"/>
                <TextBox Name="PageRangeTB"
                         HorizontalAlignment="Left"
                         Width="240"
                         MaxLength="100"
                         TextChanged="PageRangeChanged"
                         IsEnabled="{Binding ElementName=PageRangeRB, Path=IsChecked}" /> 
            </StackPanel>
        </Expander>
        
        <Expander Header="Files"
                  Grid.Row="1"
                  Grid.Column="0"
                  IsExpanded="True">
            <StackPanel Margin="5,0,0,0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Label Content="Files"
                           Grid.Column="0" Grid.Row="0"
                           Padding="0" />
                    <ComboBox Name="FilesCombo"
                              Grid.Column="1" Grid.Row="0"
                              HorizontalAlignment="Right"
                              SelectionChanged="FilesSelectionChanged">
                        <ComboBoxItem Content="Single PDF File"/>
                        <ComboBoxItem Content="Multiple Single PDF Files (Page name as suffix)"/>
                        <ComboBoxItem Content="Multiple Single PDF Files (Page number as suffix)"/>
                    </ComboBox>
                </Grid>
                <!--<CheckBox Name="GroupingCB"
                          Content="Order pages by grouping"
                          Grid.Column="0" Grid.Row="1"
                          IsEnabled="False" />-->
            </StackPanel>
        </Expander>
        
        <StackPanel Orientation="Vertical"
                    Grid.Row="2"
                    Grid.Column="0">
            <Label Content="Output Folder"/>
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Left">
                <TextBox Name="OutputFolderTB"
                         IsReadOnly="True"
                         VerticalAlignment="Center"
                         Width="360" />
                <Button Name="OutputFolderBtn"
                        Content="Select"
                        VerticalAlignment="Center"
                        Click="OutputFolder_Button_Click" />
            </StackPanel>
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Left">
                <Label Content="Basename"/>
                <TextBox Name="BasenameTB"
                     Width="307"
                     MaxLength="100"
                     TextChanged="BasenameChanged" />
            </StackPanel>
        </StackPanel>
        
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Right"
                    Grid.Row="3"
                    Grid.Column="0"
                    Margin="0,10,0,0">
            <Button Name="OKBtn"
                    Content="OK"
                    Click="OK_Button_Click"
                    IsDefault="True" />
            <Button Name="CancleBtn"
                    Content="Cancel"
                    Click="Cancel_Button_Click"
                    IsCancel="True" />
        </StackPanel>
    </Grid>
</controls:ProWindow>

 

0 Kudos
1 Solution

Accepted Solutions
GKmieliauskas
Esri Regular Contributor

Hi,

If you want to get Pro UI style in your add-in, you need to use ArcGIS Pro styles  for window controls. It will take care of light and dark themes.

In advance you can make your own style based on ArcGIS Pro style. For example:

<Style x:Key="NewStyle" BasedOn="{StaticResource Esri_TextBlockRegular}" TargetType="{x:Type TextBlock}" >
                <Setter Property="Height" Value="20"/>
                <Setter Property="Margin" Value="10,0,0,5"/>
                <Setter Property="Padding" Value="0"/>
</Style>

View solution in original post

0 Kudos
2 Replies
GKmieliauskas
Esri Regular Contributor

Hi,

If you want to get Pro UI style in your add-in, you need to use ArcGIS Pro styles  for window controls. It will take care of light and dark themes.

In advance you can make your own style based on ArcGIS Pro style. For example:

<Style x:Key="NewStyle" BasedOn="{StaticResource Esri_TextBlockRegular}" TargetType="{x:Type TextBlock}" >
                <Setter Property="Height" Value="20"/>
                <Setter Property="Margin" Value="10,0,0,5"/>
                <Setter Property="Padding" Value="0"/>
</Style>
0 Kudos
AlanStewart
Occasional Contributor

Thanks I had not run across that particular document.

0 Kudos