feat(ui): implement modern sidebar navigation and card-based layouts

README.md

@@ -54,7 +54,23 @@ For the best VSIX development experience, pair this extension with [CodingWithCa
 
 ## 🖼️ Screenshots
 
-*Coming soon!*
+### Metadata
+![Metadata Editor](resources/metadata.png)
+
+### Installation Targets
+![Installation Targets](resources/install-targets.png)
+
+### Dependencies
+![Dependencies](resources/dependencies.png)
+
+### Prerequisites
+![Prerequisites](resources/prerequisites.png)
+
+### Assets
+![Assets](resources/assets.png)
+
+### Content
+![Content](resources/content.png)
 
 ## 🛠️ Installation
 

src/CodingWithCalvin.VsixManifestDesigner/Converters/IndexToBoolConverter.cs

@@ -0,0 +1,48 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+
+namespace CodingWithCalvin.VsixManifestDesigner.Converters;
+
+/// <summary>
+/// Converts an index value to a boolean, returning true if the bound value equals the converter parameter.
+/// Used for binding RadioButtons to a SelectedTabIndex property.
+/// </summary>
+public sealed class IndexToBoolConverter : IValueConverter
+{
+    /// <summary>
+    /// Converts an integer index to a boolean by comparing with the parameter.
+    /// </summary>
+    /// <param name="value">The current index value.</param>
+    /// <param name="targetType">The target type (bool).</param>
+    /// <param name="parameter">The index to compare against.</param>
+    /// <param name="culture">The culture info.</param>
+    /// <returns>True if value equals parameter; otherwise, false.</returns>
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is int index && parameter is string paramString && int.TryParse(paramString, out int paramIndex))
+        {
+            return index == paramIndex;
+        }
+
+        return false;
+    }
+
+    /// <summary>
+    /// Converts a boolean back to an integer index.
+    /// </summary>
+    /// <param name="value">The boolean value (IsChecked).</param>
+    /// <param name="targetType">The target type (int).</param>
+    /// <param name="parameter">The index value to return if true.</param>
+    /// <param name="culture">The culture info.</param>
+    /// <returns>The parameter value if true; otherwise, Binding.DoNothing.</returns>
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is bool isChecked && isChecked && parameter is string paramString && int.TryParse(paramString, out int paramIndex))
+        {
+            return paramIndex;
+        }
+
+        return Binding.DoNothing;
+    }
+}

src/CodingWithCalvin.VsixManifestDesigner/Dialogs/AddAssetDialog.xaml

@@ -1,30 +1,29 @@
 <platformUi:DialogWindow x:Class="CodingWithCalvin.VsixManifestDesigner.Dialogs.AddAssetDialog"
-                         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:platformUi="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
-                         xmlns:vs="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
-                         mc:Ignorable="d"
-                         Title="Add Asset"
-                         Width="500" Height="350"
-                         WindowStartupLocation="CenterOwner"
-                         ResizeMode="NoResize"
-                         ShowInTaskbar="False"
-                         HasMaximizeButton="False"
-                         HasMinimizeButton="False"
-                         Background="{DynamicResource {x:Static vs:VsBrushes.ToolWindowBackgroundKey}}">
+                        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:platformUi="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
+                        xmlns:vs="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
+                        mc:Ignorable="d"
+                        Title="Add Asset"
+                        Width="500" Height="350"
+                        WindowStartupLocation="CenterOwner"
+                        ResizeMode="NoResize"
+                        ShowInTaskbar="False"
+                        HasMaximizeButton="False"
+                        HasMinimizeButton="False"
+                        Background="{DynamicResource {x:Static vs:VsBrushes.ToolWindowBackgroundKey}}">
 
     <platformUi:DialogWindow.Resources>
-        <Style TargetType="Label">
-            <Setter Property="Foreground" Value="{DynamicResource {x:Static vs:VsBrushes.ToolWindowTextKey}}" />
-        </Style>
-        <Style TargetType="TextBlock">
-            <Setter Property="Foreground" Value="{DynamicResource {x:Static vs:VsBrushes.ToolWindowTextKey}}" />
-        </Style>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="/CodingWithCalvin.VsixManifestDesigner;component/Themes/ThemeResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
     </platformUi:DialogWindow.Resources>
 
-    <Grid Margin="15">
+    <Grid Margin="{StaticResource DialogPadding}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
@@ -41,22 +40,22 @@
         </Grid.ColumnDefinitions>
 
         <!-- Type -->
-        <Label Grid.Row="0" Grid.Column="0" Content="Type:" VerticalAlignment="Center" />
-        <ComboBox Grid.Row="0" Grid.Column="1" x:Name="TypeComboBox" Margin="0,0,0,10"
+        <Label Grid.Row="0" Grid.Column="0" Content="Type:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <ComboBox Grid.Row="0" Grid.Column="1" x:Name="TypeComboBox" Margin="{StaticResource FormFieldMargin}"
                   SelectionChanged="TypeComboBox_SelectionChanged" />
 
         <!-- Source -->
-        <Label Grid.Row="1" Grid.Column="0" Content="Source:" VerticalAlignment="Center" />
-        <ComboBox Grid.Row="1" Grid.Column="1" x:Name="SourceComboBox" Margin="0,0,0,10"
+        <Label Grid.Row="1" Grid.Column="0" Content="Source:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <ComboBox Grid.Row="1" Grid.Column="1" x:Name="SourceComboBox" Margin="{StaticResource FormFieldMargin}"
                   SelectionChanged="SourceComboBox_SelectionChanged">
             <ComboBoxItem Content="This Project" Tag="CurrentProject" />
             <ComboBoxItem Content="Project in Solution" Tag="Project" />
             <ComboBoxItem Content="File on Disk" Tag="File" />
         </ComboBox>
 
         <!-- Project (shown when Source is Project) -->
-        <Label Grid.Row="2" Grid.Column="0" x:Name="ProjectLabel" Content="Project:" VerticalAlignment="Center" />
-        <Grid Grid.Row="2" Grid.Column="1" x:Name="ProjectGrid" Margin="0,0,0,10">
+        <Label Grid.Row="2" Grid.Column="0" x:Name="ProjectLabel" Content="Project:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <Grid Grid.Row="2" Grid.Column="1" x:Name="ProjectGrid" Margin="{StaticResource FormFieldMargin}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" />
                 <ColumnDefinition Width="Auto" />
@@ -66,8 +65,8 @@
         </Grid>
 
         <!-- Path (shown when Source is File) -->
-        <Label Grid.Row="3" Grid.Column="0" x:Name="PathLabel" Content="Path:" VerticalAlignment="Center" Visibility="Collapsed" />
-        <Grid Grid.Row="3" Grid.Column="1" x:Name="PathGrid" Margin="0,0,0,10" Visibility="Collapsed">
+        <Label Grid.Row="3" Grid.Column="0" x:Name="PathLabel" Content="Path:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" Visibility="Collapsed" />
+        <Grid Grid.Row="3" Grid.Column="1" x:Name="PathGrid" Margin="{StaticResource FormFieldMargin}" Visibility="Collapsed">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" />
                 <ColumnDefinition Width="Auto" />
@@ -77,27 +76,27 @@
         </Grid>
 
         <!-- VSIX Sub Path -->
-        <Label Grid.Row="4" Grid.Column="0" Content="VSIX SubPath:" VerticalAlignment="Center" />
-        <TextBox Grid.Row="4" Grid.Column="1" x:Name="VsixSubPathTextBox" Margin="0,0,0,10" />
+        <Label Grid.Row="4" Grid.Column="0" Content="VSIX SubPath:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <TextBox Grid.Row="4" Grid.Column="1" x:Name="VsixSubPathTextBox" Margin="{StaticResource FormFieldMargin}" />
 
         <!-- Addressable -->
-        <Label Grid.Row="5" Grid.Column="0" Content="Addressable:" VerticalAlignment="Center" />
-        <CheckBox Grid.Row="5" Grid.Column="1" x:Name="AddressableCheckBox" Margin="0,0,0,10" VerticalAlignment="Center" />
+        <Label Grid.Row="5" Grid.Column="0" Content="Addressable:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <CheckBox Grid.Row="5" Grid.Column="1" x:Name="AddressableCheckBox" Margin="{StaticResource FormFieldMargin}" VerticalAlignment="Center" />
 
         <!-- Warning for SDK-style projects without VsixSdk when selecting template assets -->
         <Border Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" x:Name="WarningBorder"
-                Background="#FFF3CD" BorderBrush="#FFCC00" BorderThickness="1" CornerRadius="3"
-                Padding="10" Margin="0,0,0,10" Visibility="Collapsed">
-            <TextBlock x:Name="WarningText" TextWrapping="Wrap" Foreground="#856404">
+                Style="{StaticResource WarningBoxStyle}"
+                Visibility="Collapsed">
+            <TextBlock x:Name="WarningText" Style="{StaticResource WarningBoxTextStyle}">
                 Warning: SDK-style projects require CodingWithCalvin.VsixSdk to properly handle template assets.
             </TextBlock>
         </Border>
 
         <!-- Buttons -->
         <StackPanel Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2"
                     Orientation="Horizontal" HorizontalAlignment="Right">
-            <Button Content="OK" Width="75" Margin="0,0,10,0" IsDefault="True" Click="OkButton_Click" />
-            <Button Content="Cancel" Width="75" IsCancel="True" />
+            <Button Content="OK" Margin="{StaticResource ButtonSpacing}" IsDefault="True" Click="OkButton_Click" />
+            <Button Content="Cancel" IsCancel="True" />
         </StackPanel>
     </Grid>
 </platformUi:DialogWindow>

src/CodingWithCalvin.VsixManifestDesigner/Dialogs/AddContentDialog.xaml

@@ -1,30 +1,29 @@
 <platformUi:DialogWindow x:Class="CodingWithCalvin.VsixManifestDesigner.Dialogs.AddContentDialog"
-                         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:platformUi="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
-                         xmlns:vs="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
-                         mc:Ignorable="d"
-                         Title="Add Content"
-                         Width="450" Height="200"
-                         WindowStartupLocation="CenterOwner"
-                         ResizeMode="NoResize"
-                         ShowInTaskbar="False"
-                         HasMaximizeButton="False"
-                         HasMinimizeButton="False"
-                         Background="{DynamicResource {x:Static vs:VsBrushes.ToolWindowBackgroundKey}}">
+                        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:platformUi="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
+                        xmlns:vs="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
+                        mc:Ignorable="d"
+                        Title="Add Content"
+                        Width="450" Height="200"
+                        WindowStartupLocation="CenterOwner"
+                        ResizeMode="NoResize"
+                        ShowInTaskbar="False"
+                        HasMaximizeButton="False"
+                        HasMinimizeButton="False"
+                        Background="{DynamicResource {x:Static vs:VsBrushes.ToolWindowBackgroundKey}}">
 
     <platformUi:DialogWindow.Resources>
-        <Style TargetType="Label">
-            <Setter Property="Foreground" Value="{DynamicResource {x:Static vs:VsBrushes.ToolWindowTextKey}}" />
-        </Style>
-        <Style TargetType="TextBlock">
-            <Setter Property="Foreground" Value="{DynamicResource {x:Static vs:VsBrushes.ToolWindowTextKey}}" />
-        </Style>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="/CodingWithCalvin.VsixManifestDesigner;component/Themes/ThemeResources.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
     </platformUi:DialogWindow.Resources>
 
-    <Grid Margin="15">
+    <Grid Margin="{StaticResource DialogPadding}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
@@ -36,12 +35,12 @@
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
 
-        <Label Grid.Row="0" Grid.Column="0" Content="Type:" VerticalAlignment="Center" />
-        <ComboBox Grid.Row="0" Grid.Column="1" x:Name="TypeComboBox" Margin="0,0,0,10"
+        <Label Grid.Row="0" Grid.Column="0" Content="Type:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <ComboBox Grid.Row="0" Grid.Column="1" x:Name="TypeComboBox" Margin="{StaticResource FormFieldMargin}"
                   SelectedItem="{Binding Type, Mode=TwoWay}" />
 
-        <Label Grid.Row="1" Grid.Column="0" Content="Path:" VerticalAlignment="Center" />
-        <Grid Grid.Row="1" Grid.Column="1" Margin="0,0,0,10">
+        <Label Grid.Row="1" Grid.Column="0" Content="Path:" VerticalAlignment="Center" Margin="{StaticResource FormFieldMargin}" />
+        <Grid Grid.Row="1" Grid.Column="1" Margin="{StaticResource FormFieldMargin}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*" />
                 <ColumnDefinition Width="Auto" />
@@ -52,8 +51,8 @@
 
         <StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
                     Orientation="Horizontal" HorizontalAlignment="Right">
-            <Button Content="OK" Width="75" Margin="0,0,10,0" IsDefault="True" Click="OkButton_Click" />
-            <Button Content="Cancel" Width="75" IsCancel="True" />
+            <Button Content="OK" Margin="{StaticResource ButtonSpacing}" IsDefault="True" Click="OkButton_Click" />
+            <Button Content="Cancel" IsCancel="True" />
         </StackPanel>
     </Grid>
 </platformUi:DialogWindow>