AI-Assisted Application Development II: Custom UI Controls and Styles

Utilizing Large Language Model AI for software development can help save time, build consistency in programming style, and streamline tedious tasks. It can also be extraordinarily fun. In a prior blog post, Chat GPT was utilized to assist in the development of a ViewModelBase class, that assists in the development of Model-View-ViewModel (MVVM) pattern applications, binding button commands to methods, and building an eventing infrastructure across the application.

In this blog post, ChatGPT will be leveraged in the styling of the DoseMetricExample application. Application styling and the building of themes can be tedious and time-consuming depending on the UI elements within the application.

Update Note: After using the resource dictionary to style my application for some time, I've made some improvements to the visualization of my controls. Please see the file below for the most up-to-date control stylizations being used. Please note, this does not include the color stylings which can be seen in the post below.

ControlStyles.txt

Download TXT • 13KB

Introduction

The DoseMetric application is available on GitHub for ease of access. This application originally derives from a MyVarian Webinar focusing on application development with ESAPI. The original code is available via the Varian Develop page at varianapis.github.io. To begin this example, clone the DoseMetricExample project from the Gateway-Scripts GitHub page: https://github.com/Gateway-Scripts/DoseMetricExample

Be sure that the application can launch. The .NET Target Framework may need to be updated depending on the version of ESAPI being targeted for this application. The application is currently at .NET Framework 4.8, but can be changed in the project properties. Additionally, the VMS libraries may need to be re-attached if the path to the API differs in the reader's development environment.

Styling the Application

Currently, this application is visually bland. In my first attempt for styling the application, ChatGPT 4o was requested the following. Please do not copy this response into the application yet. There were a few iterations of changes made to this initial response. Please see the section titled Final Style to see the final response from ChatGPT.

Can we set up styles in the App.xaml file to change the style and build a theme for our applications?

The response was instruction on various ways to add styling to an application, including (1) defining styles in an App.xaml file.

<Application x:Class="YourNamespace.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> 
	<Application.Resources> 
		<!-- Global Style for Button --> 
		<Style TargetType="Button"> 
		<Setter Property="Background" Value="LightBlue"/> 
		<Setter Property="Foreground" Value="White"/> 
		<Setter Property="FontWeight" Value="Bold"/> 
		<Setter Property="Margin" Value="5"/> 
		</Style> 
		<!-- Global Style for TextBox --> 
		<Style TargetType="TextBox">
		<Setter Property="Margin" Value="5"/> 
		<Setter Property="Padding" Value="4"/> 
		<Setter Property="BorderBrush" Value="Gray"/> 
		<Setter Property="BorderThickness" Value="1"/> 
		</Style> 
	</Application.Resources> 
</Application>

(2) Adding theme files to the application and calling the theme from the App.xaml file.

LightTheme.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
	<Color x:Key="PrimaryColor">LightBlue</Color> 
	<SolidColorBrush x:Key="ButtonBackground" Color="{StaticResource PrimaryColor}"/> 
	<SolidColorBrush x:Key="ButtonForeground" Color="White"/> 
	<Style TargetType="Button"> 
		<Setter Property="Background" Value="{StaticResource ButtonBackground}"/> 
		<Setter Property="Foreground" Value="{StaticResource ButtonForeground}"/> 
	</Style> 
</ResourceDictionary>

DarkTheme.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
	<Color x:Key="PrimaryColor">DarkSlateGray</Color> 
	<SolidColorBrush x:Key="ButtonBackground" Color="{StaticResource PrimaryColor}"/> 
	<SolidColorBrush x:Key="ButtonForeground" Color="LightGray"/> 
	<Style TargetType="Button"> 
		<Setter Property="Background" Value="{StaticResource ButtonBackground}"/> 
		<Setter Property="Foreground" Value="{StaticResource ButtonForeground}"/> 
	</Style> 
</ResourceDictionary>

Step 3: Merge the Resource Dictionary in App.xaml

Now, include one of the theme dictionaries in App.xaml:

<Application x:Class="YourNamespace.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> 
	<Application.Resources> 
		<ResourceDictionary> 
			<ResourceDictionary.MergedDictionaries> 
				<!-- Change this to switch themes -->
	 			<ResourceDictionary Source="Themes/LightTheme.xaml"/> 
				<!-- Or use DarkTheme.xaml for dark mode -->
	 		</ResourceDictionary.MergedDictionaries> 
		</ResourceDictionary> 
	</Application.Resources> 
</Application>

After this initial response, the following was requested of ChatGPT.

Can you please create me a theme that includes color and style properties for a progress bar, buttons, comboboxes, and text, and also please give me a theme that is a creative as you can make it.

The response was very similar to what will be posted as the final response, but there were some issues with some of the controls.

Edits to Content Controls

Button

The button control had the following setter property for "Template" that included an attribute called "CornerRadius". CornerRadius is not an attribute that exists in a Border UI Element in WPF.

 <Setter Property="CornerRadius" Value="8"/>

After receiving an error from Visual Studio, the following was prompted to ChatGPT:

on my button the style property cornerradius is not available

which updated the CornerRadius attribute to the Border within the Button "Template" path.

<Setter Property="Template"> 
	<Setter.Value> 
		<ControlTemplate TargetType="Button"> 
			<Border Background="{TemplateBinding Background}" CornerRadius="8"> 		<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
			</Border> 
		</ControlTemplate> 
	</Setter.Value> 
</Setter>

Progress Bar

Progress Bar UI controls were referencing an external converter class. After implementing that class, progress bars were not filling, and therefore the following was requested.

The progress bar is not filling anymore and also can we change the style to look sleek and modern.

At this time, the following message was responded. The following code was added inside the <Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ProgressBar">... Check out the full context shared in the final response shared in the next section.

Here’s an updated ProgressBar style that should work without an external converter, while keeping a minimalist, modern appearance. We’ll use a simple trick by setting the Width of the Rectangle within the ProgressBar to match the Value property using a Grid with ColumnDefinitions to represent the progress proportion.

<ControlTemplate.Triggers> 
	<Trigger Property="IsIndeterminate" Value="True"> 
		<Setter TargetName="PART_Indicator" Property="Width" Value="0"/> 
	</Trigger> 
	<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}" Value="0"> 
		<Setter TargetName="PART_Indicator" Property="Width" Value="0"/> 
	</DataTrigger> 
	<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}" Value="100"> 
		<Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"/> 
	</DataTrigger> 
</ControlTemplate.Triggers>

DataTriggers for Progress: DataTriggers dynamically adjust the width of PART_Indicator based on the ProgressBar’s Value.

ComboBox

The dreaded Combobox. It seems it doesn't matter what styling is applied, the combobox always displays as a dull gray color in the background. The initial combobox styling from the template ChatGPT provided was no different. With Properties such as "Background", "Foreground", and "BorderBrush" set in the template, that base gray content control persisted. Please see this full response where ChatGPT practically rewrites the ComboBox control.

even with these styles set the combobox is still the default gray color

If the ComboBox is still displaying the default gray color, it may be due to the default ComboBox template not fully respecting the Background setter in WPF. In this case, we can override the entire ControlTemplate for the ComboBox to make sure it fully uses the custom styles.

Here’s a complete ComboBox style with a custom ControlTemplate that should apply your colors effectively:

<Style TargetType="ComboBox"> 
<Setter Property="Foreground" Value="{StaticResource TextBrush}"/> 
<Setter Property="Background" Value="{StaticResource PrimaryBrush}"/> 
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}"/> 
<Setter Property="Padding" Value="5"/> <Setter Property="Template"> 
	<Setter.Value> 
		<ControlTemplate TargetType="ComboBox"> 
			<Grid> 
				<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="3"/> 
				<ToggleButton x:Name="ToggleButton" Grid.Column="2"                                   Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
				<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Margin="4,2,25,2" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/> 
			<Path Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AccentBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </ToggleButton>
                    <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Margin="4,2,25,2" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                    <Popup x:Name="PART_Popup" AllowsTransparency="True" IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" Focusable="False" PopupAnimation="Slide"> 
					<Grid MaxHeight="200" Background="{StaticResource PrimaryBrush}"> <Border x:Name="DropDownBorder" Background="{StaticResource PrimaryBrush}" BorderBrush="{StaticResource AccentBrush}" BorderThickness="1"/> 
					<ScrollViewer Margin="4,6,4,6"> 
					<StackPanel IsItemsHost="True" /> 
					</ScrollViewer> 
					</Grid> 
				</Popup> 
			</Grid> 
		<ControlTemplate.Triggers> 
		<Trigger Property="IsEnabled" Value="False"> 
			<Setter TargetName="Border" Property="Background" Value="{StaticResource SecondaryBrush}"/> 
			<Setter Property="Foreground" Value="{StaticResource AccentBrush}"/> 
		</Trigger> 
		</ControlTemplate.Triggers> 
	</ControlTemplate> 
	</Setter.Value> 
</Setter> 
</Style>

And this solution actually fixed the ComboBox styling issues. A couple of other final requests to the implementation led to the final style. The colors selected at the top of the Final Style in the next section come from the response to this request.

too dark can wee go more neon miami vice style

Final Style

In order to implement the final style in this example. The following text must by copied into the <application.Resources> tag of the App.xaml file. Alternatively, separate xaml template files can be defined as in the first ChatGPT response. To make it most easy to copy, the text is available in the blog below, but also in the text file attached.

ResourceDictionary.txt

Download TXT • 9KB

<ResourceDictionary>

    <!--#region Vice-->

    <!-- Neon Miami Vice Color Palette -->

    <Color x:Key="PrimaryColor">#FF2E2E3E</Color>

    <!-- Deep indigo-gray for the main background -->

    <Color x:Key="AccentColor">#FFFF77E8</Color>

    <!-- Neon aqua for primary accents -->

    <Color x:Key="SecondaryColor">#FF3C3C5C</Color>

    <!-- Dark purple-gray for secondary areas -->

    <Color x:Key="TextColor">#FFB0B8FF</Color>

    <!-- Light off-white for text -->

    <Color x:Key="BackgroundColor">#FF2E2E3E</Color>

    <!-- Same as Primary for cohesive background -->

    <Color x:Key="HighlightColor">#FFFF77E8</Color>

    <!-- Neon pink-magenta for highlights -->

    <Color x:Key="ButtonColor">#FFFFA552</Color>

    <!-- Coral-orange for button pops of color -->

    <Color x:Key="SuccessColor">#FF00FFAB</Color>

    <!-- Bright green-cyan for success indicators -->

    <!-- Brushes for the Color Palette -->

    <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>

    <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>

    <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}"/>

    <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>

    <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>

    <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}"/>

    <SolidColorBrush x:Key="ButtonBrush" Color="{StaticResource ButtonColor}"/>

    <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>

    <!--#endregion-->

    <!-- Window Style -->

    <Style TargetType="Window">

        <Setter Property="Background" Value="{StaticResource PrimaryBrush}"/>

        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>

        <Setter Property="FontFamily" Value="Segoe UI"/>

        <Setter Property="FontSize" Value="14"/>

        <Setter Property="WindowStyle" Value="None"/>

        <Setter Property="AllowsTransparency" Value="True"/>

        <Setter Property="Padding" Value="10"/>

        <Setter Property="Effect">

            <Setter.Value>

                <DropShadowEffect BlurRadius="15" Color="#90000000" ShadowDepth="0"/>

            </Setter.Value>

        </Setter>

    </Style>

    <!-- Button Style -->

    <Style TargetType="Button">

        <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>

        <Setter Property="Foreground" Value="White"/>

        <Setter Property="FontWeight" Value="Bold"/>

        <Setter Property="Padding" Value="10,5"/>

        <Setter Property="Margin" Value="5"/>

        <Setter Property="BorderThickness" Value="0"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="Button">

                    <Border Background="{TemplateBinding Background}" CornerRadius="8">

                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Background" Value="{StaticResource AccentBrush}"/>

            </Trigger>

        </Style.Triggers>

    </Style>

    <!-- ComboBox Style -->

    <Style TargetType="ComboBox">

        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>

        <Setter Property="Background" Value="{StaticResource PrimaryBrush}"/>

        <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}"/>

        <Setter Property="Padding" Value="5"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ComboBox">

                    <Grid>

                        <Border x:Name="Border"

                    Background="{TemplateBinding Background}"

                    BorderBrush="{TemplateBinding BorderBrush}"

                    BorderThickness="1"

                    CornerRadius="3"/>

                        <ToggleButton x:Name="ToggleButton"

                          Grid.Column="2"

                          Focusable="False"

                          IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"

                          ClickMode="Press"

                          Background="{TemplateBinding Background}"

                          BorderBrush="{TemplateBinding BorderBrush}">

                            <Path Data="M 0 0 L 4 4 L 8 0 Z"

                      Fill="{StaticResource AccentBrush}"

                      HorizontalAlignment="Center"

                      VerticalAlignment="Center"/>

                        </ToggleButton>

                        <ContentPresenter HorizontalAlignment="Left"

                              VerticalAlignment="Center"

                              Margin="4,2,25,2"

                              Content="{TemplateBinding SelectionBoxItem}"

                              ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"

                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

                        <Popup x:Name="PART_Popup"

                   AllowsTransparency="True"

                   IsOpen="{TemplateBinding IsDropDownOpen}"

                   Placement="Bottom"

                   Focusable="False"

                   PopupAnimation="Slide">

                            <Grid MaxHeight="200" Background="{StaticResource PrimaryBrush}">

                                <Border x:Name="DropDownBorder" 

                            Background="{StaticResource PrimaryBrush}" 

                            BorderBrush="{StaticResource AccentBrush}"

                            BorderThickness="1"/>

                                <ScrollViewer Margin="4,6,4,6">

                                    <StackPanel IsItemsHost="True" />

                                </ScrollViewer>

                            </Grid>

                        </Popup>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsEnabled" Value="False">

                            <Setter TargetName="Border" Property="Background" Value="{StaticResource SecondaryBrush}"/>

                            <Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!-- ProgressBar Style -->

    <Style TargetType="ProgressBar">

        <Setter Property="Height" Value="20"/>

        <Setter Property="Foreground" Value="{StaticResource HighlightBrush}"/>

        <Setter Property="Background" Value="{StaticResource SecondaryBrush}"/>

        <Setter Property="BorderBrush" Value="Transparent"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ProgressBar">

                    <Border Background="{TemplateBinding Background}" 

                CornerRadius="5" 

                BorderBrush="{TemplateBinding BorderBrush}" 

                BorderThickness="0.5">

                        <Grid x:Name="PART_Track" ClipToBounds="True" SnapsToDevicePixels="True">

                            <Rectangle x:Name="PART_Indicator" 

                           Fill="{TemplateBinding Foreground}" 

                           HorizontalAlignment="Left" 

                           RadiusX="5" RadiusY="5"/>

                        </Grid>

                    </Border>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsIndeterminate" Value="True">

                            <Setter TargetName="PART_Indicator" Property="Width" Value="0"/>

                        </Trigger>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}" Value="0">

                            <Setter TargetName="PART_Indicator" Property="Width" Value="0"/>

                        </DataTrigger>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value}" Value="100">

                            <Setter TargetName="PART_Indicator" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"/>

                        </DataTrigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!-- TextBlock Style -->

    <Style TargetType="TextBlock">

        <Setter Property="Foreground" Value="{StaticResource TextBrush}"/>

        <Setter Property="FontSize" Value="14"/>

        <Setter Property="FontWeight" Value="Medium"/>

        <Setter Property="Margin" Value="5,0"/>

    </Style>

</ResourceDictionary>

Prior to implementing these changes, add the following line to the MainView.xaml as an attribute to the Window.

 Background="{StaticResource PrimaryBrush}"

Lastly, in the DoseMetricView.xaml, the Grid on line 17 has a Background set to "LightGray" and remove the Background set to "LightSteelBlue" on line 9 of DoseMetricSelectionView.xaml. Please remove that as well to allow the style to propagate to this area of the application.

Run the application to see the result.

Mixing up Styles

After the initial styles were set up. Chat GPT was requested to generate color templates in other styles. Feel free to paste over the Color and SolidColorBrush elements from the prior ResourceDictionary to test out these various color themes.

can you revise my colors to be like the lord of the rings the fellowship of the ring themed?

 <!--#region LOTR-->

 <!-- Lord of the Rings Color Palette -->

 <Color x:Key="PrimaryColor">#FF2C3E3E</Color>

 <!-- Dark forest green for backgrounds -->

 <Color x:Key="AccentColor">#FFD4A017</Color>

 <!-- Warm gold accent for highlights -->

 <Color x:Key="SecondaryColor">#FF5E503F</Color>

 <!-- Muted earthy brown for secondary areas -->

 <Color x:Key="TextColor">#FFC4B28F</Color>

 <!-- Warm, deeper parchment beige for readable text -->

 <Color x:Key="BackgroundColor">#FF1E2A2A</Color>

 <!-- Darker, almost black-green background -->

 <Color x:Key="HighlightColor">#FFA67F2D</Color>

 <!-- Coppery bronze for special highlights -->

 <Color x:Key="ButtonColor">#FF4A6B3C</Color>

 <!-- Mossy green for buttons -->

 <Color x:Key="SuccessColor">#FF7EAE6F</Color>

 <!-- Soft sage green for success indications -->

 <!-- Brushes for the Color Palette -->

 <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>

 <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>

 <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}"/>

 <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>

 <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>

 <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}"/>

 <SolidColorBrush x:Key="ButtonBrush" Color="{StaticResource ButtonColor}"/>

 <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>

 <!--#endregion-->

can we create another color pallette for start wars episode III return of the sith

 <!--#region Star Wars-->

 <!-- Revenge of the Sith Color Palette -->

 <Color x:Key="PrimaryColor">#FF1C1B1A</Color>

 <!-- Dark black-gray for backgrounds -->

 <Color x:Key="AccentColor">#FF9A3100</Color>

 <!-- Fiery lava orange for accents -->

 <Color x:Key="SecondaryColor">#FF4B3A36</Color>

 <!-- Smoky brown-gray for secondary areas -->

 <Color x:Key="TextColor">#FFB0A896</Color>

 <!-- Rich, warm gray for readable text on dark backgrounds -->

 <Color x:Key="BackgroundColor">#FF121212</Color>

 <!-- Deep, dark charcoal for main background -->

 <Color x:Key="HighlightColor">#FFBA1F23</Color>

 <!-- Sith red for critical highlights -->

 <Color x:Key="ButtonColor">#FF5C5248</Color>

 <!-- Dark earthy brown for buttons -->

 <Color x:Key="SuccessColor">#FF2A602D</Color>

 <!-- Dark olive green for success indicators -->

 <!-- Brushes for the Color Palette -->

 <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>

 <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>

 <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}"/>

 <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>

 <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>

 <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}"/>

 <SolidColorBrush x:Key="ButtonBrush" Color="{StaticResource ButtonColor}"/>

 <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>

 <!--#endregion-->

Can you create one more theme in the style of the movie interstellar?

 <!--#region Interstellar-->

 <!-- Interstellar Color Palette -->

 <Color x:Key="PrimaryColor">#FF1B1F32</Color>

 <!-- Deep space blue-black for backgrounds -->

 <Color x:Key="AccentColor">#FF8A9DA8</Color>

 <!-- Soft, desaturated gray-blue for accents -->

 <Color x:Key="SecondaryColor">#FF2D3545</Color>

 <!-- Dark, steel gray for secondary areas -->

 <Color x:Key="TextColor">#FFDFDFE2</Color>

 <!-- Light, cool gray for readable text -->

 <Color x:Key="BackgroundColor">#FF0F131D</Color>

 <!-- Almost-black for the main background -->

 <Color x:Key="HighlightColor">#FF80C1FF</Color>

 <!-- Pale starlight blue for highlights -->

 <Color x:Key="ButtonColor">#FF3A4B5C</Color>

 <!-- Dark slate blue-gray for buttons -->

 <Color x:Key="SuccessColor">#FF4D92A5</Color>

 <!-- Muted teal for success indicators -->

 <!-- Brushes for the Color Palette -->

 <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>

 <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>

 <SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}"/>

 <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>

 <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>

 <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}"/>

 <SolidColorBrush x:Key="ButtonBrush" Color="{StaticResource ButtonColor}"/>

 <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>

 <!--#endregion-->

can you send me a color template matching Spiderman: Across the Spiderverse?

<!--#region Spider Verse-->

<!-- Spider-Verse Color Palette -->

<Color x:Key="PrimaryColor">#FF0D0F2A</Color>

<!-- Deep indigo for main backgrounds -->

<Color x:Key="AccentColor">#FF4A00E0</Color>

<!-- Vibrant neon purple for accents -->

<Color x:Key="SecondaryColor">#FF1A1B2E</Color>

<!-- Darker purple-blue for secondary areas -->

<Color x:Key="TextColor">#FFE4E4F3</Color>

<!-- Light cool gray for text readability -->

<Color x:Key="BackgroundColor">#FF15183D</Color>

<!-- Very dark, almost black-blue for background -->

<Color x:Key="HighlightColor">#FFFF3A3A</Color>

<!-- Bold, Spider-Man red for highlights -->

<Color x:Key="ButtonColor">#FF0077FF</Color>

<!-- Electric blue for button pops of color -->

<Color x:Key="SuccessColor">#FF19A374</Color>

<!-- Bright teal-green for success indicators -->

<!-- Brushes for the Color Palette -->

<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}"/>

<SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>

<SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}"/>

<SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>

<SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource BackgroundColor}"/>

<SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}"/>

<SolidColorBrush x:Key="ButtonBrush" Color="{StaticResource ButtonColor}"/>

<SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>

<!--#endregion-->

Check out all the fun styles AI can provide!

Conclusion

By integrating AI assistance in UI design and development, we were able to streamline the process of creating custom controls and themes, saving time and maintaining a cohesive look throughout the application. ChatGPT proved to be an invaluable tool, not only in generating initial templates for controls but also in troubleshooting common WPF quirks and iterating on styles to meet specific visual goals.

The resulting stylized themes add personality to the DoseMetricExample application, transforming it from a functional but plain UI into something visually engaging and tailored to our needs. This experience highlights how AI can go beyond simple code generation, becoming a partner in design and problem-solving, even in complex applications like WPF projects.

Moving forward, leveraging AI in similar ways can open doors to creative, efficient solutions, allowing developers to focus on the functionality and innovation at the heart of their applications.

The completed version of this application is available on GitHub on a separate branch labelled "stylized": https://github.com/Gateway-Scripts/DoseMetricExample/tree/stylized