scoped/clipforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refactor MainWindow.xaml.cs to improve the visual feedback for active selections in navigation buttons, enhancing user experience. This update includes style adjustments to better indicate the currently selected page.

Browse Source
This commit is contained in:
scoped
2026-02-22 12:42:09 -05:00
parent fa5bc81bd6
commit 86b4e10a83
2 changed files with 160 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
ClipForge/App.xaml
View File

@@ -8,9 +8,44 @@
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<!-- ClipForge custom palette (less Windows, more app identity) -->
<SolidColorBrush x:Key="ClipForgeSidebarBrush" Color="#0A0A0E"/>
<SolidColorBrush x:Key="ClipForgeMainBrush" Color="#0F0F14"/>
<SolidColorBrush x:Key="ClipForgeCardBrush" Color="#16161D"/>
<SolidColorBrush x:Key="ClipForgeCardBorderBrush" Color="#252532"/>
<SolidColorBrush x:Key="ClipForgeAccentBrush" Color="#E8FF47"/>
<SolidColorBrush x:Key="ClipForgeTextPrimaryBrush" Color="#F0F0F5"/>
<SolidColorBrush x:Key="ClipForgeTextSecondaryBrush" Color="#8E8E9A"/>
<SolidColorBrush x:Key="ClipForgeNavHoverBrush" Color="#1E1E26"/>
<!-- Sidebar nav: default (unselected) -->
<Style x:Key="ClipForgeNavButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource ClipForgeTextPrimaryBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="12,10"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
<!-- Sidebar nav: selected / accent -->
<Style x:Key="ClipForgeNavButtonSelectedStyle" TargetType="Button" BasedOn="{StaticResource ClipForgeNavButtonStyle}">
<Setter Property="Background" Value="{StaticResource ClipForgeAccentBrush}"/>
<Setter Property="Foreground" Value="#0A0A0E"/>
</Style>
<!-- Accent button (Save Settings, etc.) -->
<Style x:Key="ClipForgeAccentButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ClipForgeAccentBrush}"/>
<Setter Property="Foreground" Value="#0A0A0E"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="20,10"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>

196
ClipForge/MainWindow.xaml
View File

@@ -13,56 +13,71 @@
<MicaBackdrop />
</Window.SystemBackdrop>
<Grid x:Name="RootGrid">
<Grid x:Name="RootGrid" Background="{StaticResource ClipForgeMainBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- SIDEBAR -->
<Border Grid.Column="0"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
Background="{StaticResource ClipForgeSidebarBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="0,0,1,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- App title -->
<Border Grid.Row="0" Padding="16,0">
<TextBlock Text="CLIPFORGE"
FontSize="13"
FontWeight="Bold"
CharacterSpacing="80"
Foreground="#E8FF47"
VerticalAlignment="Center"/>
<!-- Logo + wordmark -->
<Border Grid.Row="0" Padding="20,24,20,20" Margin="0,0,0,8">
<StackPanel Spacing="14" HorizontalAlignment="Left">
<Border Width="44" Height="44"
Background="{StaticResource ClipForgeAccentBrush}"
CornerRadius="10"
HorizontalAlignment="Left">
<TextBlock Text="&#xE8F1;"
FontFamily="Segoe MDL2 Assets"
FontSize="22"
Foreground="#0A0A0E"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<TextBlock Text="ClipForge"
FontSize="20"
FontWeight="Bold"
Foreground="{StaticResource ClipForgeAccentBrush}"
CharacterSpacing="60"/>
<TextBlock Text="Capture. Trim. Share."
FontSize="11"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
Opacity="0.9"/>
</StackPanel>
</Border>
<!-- Nav items -->
<StackPanel Grid.Row="1" Spacing="2" Padding="8,8">
<StackPanel Grid.Row="1" Spacing="4" Padding="12,8" VerticalAlignment="Top">
<Button x:Name="NavClips"
HorizontalAlignment="Stretch"
Click="NavClips_Click"
Style="{StaticResource AccentButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="10">
Style="{StaticResource ClipForgeNavButtonSelectedStyle}">
<StackPanel Orientation="Horizontal" Spacing="12">
<TextBlock Text="&#xE8F1;"
FontFamily="Segoe MDL2 Assets"
FontSize="14"/>
FontSize="16"/>
<TextBlock Text="Clips"
FontSize="13"
FontWeight="SemiBold"/>
</StackPanel>
</Button>
<Button x:Name="NavSettings"
HorizontalAlignment="Stretch"
Click="NavSettings_Click">
<StackPanel Orientation="Horizontal" Spacing="10">
Click="NavSettings_Click"
Style="{StaticResource ClipForgeNavButtonStyle}">
<StackPanel Orientation="Horizontal" Spacing="12">
<TextBlock Text="&#xE713;"
FontFamily="Segoe MDL2 Assets"
FontSize="14"/>
FontSize="16"/>
<TextBlock Text="Settings"
FontSize="13"
FontWeight="SemiBold"/>
@@ -73,10 +88,15 @@
<!-- Record button -->
<Button x:Name="RecordButton"
Grid.Row="2"
Margin="8"
Margin="12,12,12,20"
HorizontalAlignment="Stretch"
Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="12,10"
Click="RecordButton_Click">
<StackPanel Orientation="Horizontal" Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="10">
<Ellipse x:Name="RecordDot"
Width="8" Height="8"
Fill="#FF4757"/>
@@ -84,6 +104,7 @@
Text="CAPTURING"
FontSize="11"
FontWeight="Bold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
CharacterSpacing="40"/>
</StackPanel>
</Button>
@@ -91,7 +112,7 @@
</Border>
<!-- MAIN CONTENT -->
<Grid Grid.Column="1">
<Grid Grid.Column="1" Background="{StaticResource ClipForgeMainBrush}">
<!-- CLIPS PAGE -->
<Grid x:Name="ClipsPage" Visibility="Visible">
@@ -102,37 +123,44 @@
</Grid.RowDefinitions>
<!-- Header -->
<Border Grid.Row="0" Padding="24,20,24,0">
<Border Grid.Row="0" Padding="28,24,28,0">
<Grid>
<StackPanel Orientation="Horizontal" Spacing="12"
VerticalAlignment="Bottom">
<TextBlock Text="My Clips"
FontSize="24"
FontWeight="Bold"/>
FontSize="26"
FontWeight="Bold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"/>
<TextBlock x:Name="ClipCountText"
Text="0 clips"
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
FontSize="13"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
VerticalAlignment="Bottom"
Margin="0,0,0,3"/>
Margin="0,0,0,4"/>
</StackPanel>
<Button Content="Open Folder"
HorizontalAlignment="Right"
Background="{StaticResource ClipForgeCardBrush}"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="16,8"
Click="OpenFolder_Click"/>
</Grid>
</Border>
<!-- Toolbar -->
<Border Grid.Row="1" Padding="24,12">
<Border Grid.Row="1" Padding="28,16">
<AutoSuggestBox x:Name="SearchBox"
PlaceholderText="Search clips..."
Width="260"
Width="280"
HorizontalAlignment="Left"
TextChanged="SearchBox_TextChanged"/>
</Border>
<!-- Clip Grid -->
<ScrollViewer Grid.Row="2" Padding="24,0,24,24">
<ScrollViewer Grid.Row="2" Padding="28,0,28,28">
<ItemsControl x:Name="ClipGrid">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
@@ -143,11 +171,11 @@
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:ClipFile">
<Border Width="220"
Margin="0,0,12,12"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
Margin="0,0,14,14"
Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8">
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="124"/>
@@ -156,8 +184,8 @@
<!-- Thumbnail -->
<Border Grid.Row="0"
Background="#1a1a2e"
CornerRadius="8,8,0,0">
Background="{StaticResource ClipForgeSidebarBrush}"
CornerRadius="10,10,0,0">
<Grid>
<!-- Placeholder icon -->
<TextBlock Text="&#xE786;"
@@ -198,19 +226,23 @@
<TextBlock Text="{x:Bind Title}"
FontSize="12"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
TextTrimming="CharacterEllipsis"/>
<Grid>
<TextBlock Text="{x:Bind CreatedAtDisplay}"
FontSize="10"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<TextBlock Text="{x:Bind FileSize}"
FontSize="10"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
HorizontalAlignment="Right"/>
</Grid>
<StackPanel Orientation="Horizontal" Spacing="6">
<Button Tag="{x:Bind Path}"
Click="TrimClip_Click"
Background="Transparent"
BorderThickness="0"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
FontSize="11" Padding="8,4">
<TextBlock Text="&#xE8C6;"
FontFamily="Segoe MDL2 Assets"
@@ -218,6 +250,9 @@
</Button>
<Button Tag="{x:Bind Path}"
Click="RenameClip_Click"
Background="Transparent"
BorderThickness="0"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
FontSize="11" Padding="8,4">
<TextBlock Text="&#xE8AC;"
FontFamily="Segoe MDL2 Assets"
@@ -225,6 +260,9 @@
</Button>
<Button Tag="{x:Bind Path}"
Click="DeleteClip_Click"
Background="Transparent"
BorderThickness="0"
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"
FontSize="11" Padding="8,4">
<TextBlock Text="&#xE74D;"
FontFamily="Segoe MDL2 Assets"
@@ -243,33 +281,36 @@
<!-- SETTINGS PAGE -->
<Grid x:Name="SettingsPage" Visibility="Collapsed">
<ScrollViewer Padding="24">
<StackPanel Spacing="24" MaxWidth="520" HorizontalAlignment="Left">
<ScrollViewer Padding="28">
<StackPanel Spacing="24" MaxWidth="540" HorizontalAlignment="Left">
<TextBlock Text="Settings"
FontSize="24"
FontWeight="Bold"/>
FontSize="26"
FontWeight="Bold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"/>
<!-- Clip Length -->
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
<Border Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
CornerRadius="10"
Padding="20">
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="&#xE714;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{StaticResource ClipForgeAccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="Clip Length"
FontSize="14"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="How many seconds to save when you press the hotkey."
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<Grid>
<Slider x:Name="ClipLengthSlider"
Minimum="10"
@@ -281,7 +322,7 @@
Text="30 seconds"
FontSize="12"
FontWeight="SemiBold"
Foreground="#E8FF47"
Foreground="{StaticResource ClipForgeAccentBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
@@ -289,25 +330,27 @@
</Border>
<!-- Video Quality -->
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
<Border Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
CornerRadius="10"
Padding="20">
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="&#xE7F4;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{StaticResource ClipForgeAccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="Video Quality"
FontSize="14"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Higher quality means larger file sizes."
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<Grid>
<Slider x:Name="QualitySlider"
Minimum="10"
@@ -319,7 +362,7 @@
Text="70%"
FontSize="12"
FontWeight="SemiBold"
Foreground="#E8FF47"
Foreground="{StaticResource ClipForgeAccentBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Center"/>
</Grid>
@@ -327,25 +370,27 @@
</Border>
<!-- Framerate -->
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
<Border Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
CornerRadius="10"
Padding="20">
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="&#xE7F8;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{StaticResource ClipForgeAccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="Framerate"
FontSize="14"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Higher framerates are smoother but use more storage."
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<ComboBox x:Name="FramerateCombo"
SelectionChanged="FramerateCombo_SelectionChanged">
<ComboBoxItem Content="30 FPS"/>
@@ -355,61 +400,66 @@
</Border>
<!-- Hotkey -->
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
<Border Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
CornerRadius="10"
Padding="20">
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="&#xE92E;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{StaticResource ClipForgeAccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="Clip Hotkey"
FontSize="14"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Click the key below, then press your desired combination."
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<Button x:Name="HotkeyRecorderButton"
HorizontalAlignment="Left"
Click="HotkeyRecorderButton_Click"
Background="#1a1a2e"
BorderThickness="0"
CornerRadius="6"
Background="{StaticResource ClipForgeSidebarBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
Padding="16,10"
MinWidth="140"
FontFamily="Consolas"
FontSize="14"
FontWeight="Bold"
Foreground="#E8FF47"
Foreground="{StaticResource ClipForgeAccentBrush}"
Content="Alt + F9"/>
</StackPanel>
</Border>
<!-- Startup with Windows -->
<Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
<Border Background="{StaticResource ClipForgeCardBrush}"
BorderBrush="{StaticResource ClipForgeCardBorderBrush}"
BorderThickness="1"
CornerRadius="8"
CornerRadius="10"
Padding="20">
<StackPanel Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="8">
<TextBlock Text="&#xE7E8;"
FontFamily="Segoe MDL2 Assets"
FontSize="16"
Foreground="{StaticResource ClipForgeAccentBrush}"
VerticalAlignment="Center"/>
<TextBlock Text="Startup"
FontSize="14"
FontWeight="SemiBold"
Foreground="{StaticResource ClipForgeTextPrimaryBrush}"
VerticalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Launch ClipForge automatically when Windows starts."
FontSize="12"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
Foreground="{StaticResource ClipForgeTextSecondaryBrush}"/>
<ToggleSwitch x:Name="StartupToggle"
OnContent="Enabled"
OffContent="Disabled"
@@ -420,7 +470,7 @@
<!-- Save button -->
<Button x:Name="SaveSettingsButton"
Content="Save Settings"
Style="{StaticResource AccentButtonStyle}"
Style="{StaticResource ClipForgeAccentButtonStyle}"
Click="SaveSettings_Click"
HorizontalAlignment="Left"/>