ProWindow does not get ESRI styling

AlanStewart — Thu, 11 Nov 2021 20:54:21 GMT

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="PageRangeRB" Content="Page range (for example: "1, 3, 5-12")" 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>  </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>

Re: ProWindow does not get ESRI styling

GKmieliauskas — Fri, 12 Nov 2021 06:20:09 GMT

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:

Re: ProWindow does not get ESRI styling

AlanStewart — Tue, 16 Nov 2021 17:14:15 GMT

Thanks I had not run across that particular document.

topic ProWindow does not get ESRI styling in ArcGIS Pro SDK Questions

ProWindow does not get ESRI styling

Re: ProWindow does not get ESRI styling

Re: ProWindow does not get ESRI styling