Cursor rule

1---
2description: WPF-specific UI patterns and best practices
3globs: ["**/*.xaml", "**/*.xaml.cs"]
4alwaysApply: false
5---
6 
7# WPF UI Patterns
8 
9## Window Lifecycle
10 
11### Window Creation Pattern
12Windows are typically created once and shown/hidden as needed:
13 
14```csharp
15private ChatBoxWindow? _chatBoxWindow;
16 
17public void ShowChatBox()
18{
19    if (_chatBoxWindow == null)
20    {
21        _chatBoxWindow = new ChatBoxWindow();
22        _chatBoxWindow.Closed += (s, e) => { _chatBoxWindow = null; };
23    }
24    
25    _chatBoxWindow.Show();
26    _chatBoxWindow.Activate();
27}
28 
29public void HideChatBox()
30{
31    _chatBoxWindow?.Hide();
32}
33```
34 
35### Window Cleanup
36```csharp
37protected override void OnClosed(EventArgs e)
38{
39    // Save window position
40    ConfigManager.Instance.SetWindowPosition(
41        "ChatBox", Left, Top, Width, Height);
42    
43    // Cleanup resources
44    base.OnClosed(e);
45}
46```
47 
48## XAML Structure
49 
50### Standard Window Attributes
51```xml
52<Window x:Class="UGTLive.ChatBoxWindow"
53        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
54        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55        Title="ChatBox"
56        WindowStyle="None"
57        AllowsTransparency="True"
58        Background="Transparent"
59        ResizeMode="CanResize"
60        Topmost="{Binding IsAlwaysOnTop}"
61        ShowInTaskbar="False">
62</Window>
63```
64 
65### Resource Dictionaries
66Define styles in ResourceDictionary:
67 
68```xml
69<Window.Resources>
70    <Style x:Key="ModernButton" TargetType="Button">
71        <Setter Property="Background" Value="#FF2D2D30"/>
72        <Setter Property="Foreground" Value="White"/>
73        <Setter Property="BorderThickness" Value="0"/>
74        <Setter Property="Padding" Value="10,5"/>
75    </Style>
76</Window.Resources>
77```
78 
79## Data Binding
80 
81### Two-Way Binding Pattern
82```xml
83<TextBox Text="{Binding ApiKey, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
84<CheckBox IsChecked="{Binding IsEnabled, Mode=TwoWay}"/>
85<ComboBox SelectedItem="{Binding SelectedModel, Mode=TwoWay}"/>
86```
87 
88### Code-Behind Binding
89```csharp
90// Set DataContext
91this.DataContext = this;
92 
93// Implement INotifyPropertyChanged
94public event PropertyChangedEventHandler? PropertyChanged;
95 
96private string _apiKey = "";
97public string ApiKey
98{
99    get => _apiKey;
100    set
101    {
102        _apiKey = value;
103        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ApiKey)));
104    }
105}
106```
107 
108## Event Handlers
109 
110### Standard Event Pattern
111```csharp
112private void Button_Click(object sender, RoutedEventArgs e)
113{
114    if (sender is Button button)
115    {
116        // Handle click
117    }
118}
119 
120private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
121{
122    if (sender is TextBox textBox)
123    {
124        // Handle text change
125    }
126}
127```
128 
129## Window Positioning
130 
131### Load Saved Position
132```csharp
133private void Window_Loaded(object sender, RoutedEventArgs e)
134{
135    var pos = ConfigManager.Instance.GetWindowPosition("ChatBox");
136    if (pos != null)
137    {
138        this.Left = pos.X;
139        this.Top = pos.Y;
140        this.Width = pos.Width;
141        this.Height = pos.Height;
142    }
143    else
144    {
145        // Center on screen
146        this.WindowStartupLocation = WindowStartupLocation.CenterScreen;
147    }
148}
149```
150 
151### Save Position on Move
152```csharp
153private void Window_LocationChanged(object sender, EventArgs e)
154{
155    ConfigManager.Instance.SetWindowPosition(
156        "ChatBox", Left, Top, Width, Height);
157}
158```
159 
160## Custom Controls
161 
162### Draggable Window
163```csharp
164private void Window_MouseDown(object sender, MouseButtonEventArgs e)
165{
166    if (e.ChangedButton == MouseButton.Left)
167    {
168        this.DragMove();
169    }
170}
171```
172 
173### Resizable Thumb
174```xml
175<Thumb DragDelta="Thumb_DragDelta"
176       Width="10" Height="10"
177       Cursor="SizeNWSE"
178       HorizontalAlignment="Right"
179       VerticalAlignment="Bottom"/>
180```
181 
182```csharp
183private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
184{
185    this.Width = Math.Max(100, this.Width + e.HorizontalChange);
186    this.Height = Math.Max(100, this.Height + e.VerticalChange);
187}
188```
189 
190## Transparent Windows
191 
192### Transparency Setup
193```xml
194<Window WindowStyle="None"
195        AllowsTransparency="True"
196        Background="Transparent">
197    <Border Background="{Binding BackgroundColor}"
198            Opacity="{Binding Opacity}"
199            CornerRadius="5">
200        <!-- Content -->
201    </Border>
202</Window>
203```
204 
205### Opacity Binding
206```csharp
207public double Opacity
208{
209    get => _opacity;
210    set
211    {
212        _opacity = value;
213        this.Opacity = value / 100.0; // Convert 0-100 to 0-1
214    }
215}
216```
217 
218## Always-On-Top
219 
220### Topmost Property
221```xml
222<Window Topmost="{Binding IsAlwaysOnTop}"/>
223```
224 
225```csharp
226public bool IsAlwaysOnTop
227{
228    get => this.Topmost;
229    set => this.Topmost = value;
230}
231```
232 
233## Text Display
234 
235### TextBlock with Formatting
236```xml
237<TextBlock TextWrapping="Wrap">
238    <Run Text="{Binding SourceText}" Foreground="Gray"/>
239    <LineBreak/>
240    <Run Text="{Binding TranslatedText}" Foreground="White" FontWeight="Bold"/>
241</TextBlock>
242```
243 
244### ScrollViewer Pattern
245```xml
246<ScrollViewer VerticalScrollBarVisibility="Auto"
247              HorizontalScrollBarVisibility="Disabled">
248    <StackPanel Name="ContentPanel">
249        <!-- Dynamic content -->
250    </StackPanel>
251</ScrollViewer>
252```
253 
254### Auto-Scroll to Bottom
255```csharp
256private void ScrollToBottom()
257{
258    Application.Current.Dispatcher.Invoke(() =>
259    {
260        if (ScrollViewer != null)
261        {
262            ScrollViewer.ScrollToEnd();
263        }
264    });
265}
266```
267 
268## Color Pickers
269 
270### Color Dialog Pattern
271```csharp
272using System.Windows.Forms;
273 
274private void PickColorButton_Click(object sender, RoutedEventArgs e)
275{
276    using var colorDialog = new ColorDialog();
277    colorDialog.Color = System.Drawing.Color.FromArgb(
278        (int)((Color)BackgroundColor).A,
279        (int)((Color)BackgroundColor).R,
280        (int)((Color)BackgroundColor).G,
281        (int)((Color)BackgroundColor).B);
282    
283    if (colorDialog.ShowDialog() == DialogResult.OK)
284    {
285        var wpfColor = Color.FromArgb(
286            colorDialog.Color.A,
287            colorDialog.Color.R,
288            colorDialog.Color.G,
289            colorDialog.Color.B);
290        BackgroundColor = wpfColor;
291    }
292}
293```
294 
295## Animations
296 
297### Fade Animation
298```xml
299<Window.Resources>
300    <Storyboard x:Key="FadeIn">
301        <DoubleAnimation Storyboard.TargetProperty="Opacity"
302                        From="0" To="1" Duration="0:0:0.3"/>
303    </Storyboard>
304</Window.Resources>
305```
306 
307```csharp
308private void FadeIn()
309{
310    var storyboard = (Storyboard)FindResource("FadeIn");
311    storyboard?.Begin(this);
312}
313```
314 
315## ComboBox Binding
316 
317### ComboBox with Items
318```xml
319<ComboBox Name="ModelComboBox"
320          SelectedItem="{Binding SelectedModel, Mode=TwoWay}">
321    <ComboBoxItem Content="gemini-1.5-flash"/>
322    <ComboBoxItem Content="gemini-1.5-pro"/>
323    <ComboBoxItem Content="gemini-2.0-flash"/>
324</ComboBox>
325```
326 
327```csharp
328private void LoadModels()
329{
330    ModelComboBox.Items.Clear();
331    var models = new[] { "gemini-1.5-flash", "gemini-1.5-pro", "gemini-2.0-flash" };
332    foreach (var model in models)
333    {
334        ModelComboBox.Items.Add(model);
335    }
336    
337    // Set selected item
338    var savedModel = ConfigManager.Instance.GetGeminiModel();
339    ModelComboBox.SelectedItem = savedModel;
340}
341```
342 
343## Tab Control Pattern
344 
345### Settings Window Tabs
346```xml
347<TabControl>
348    <TabItem Header="General">
349        <!-- General settings -->
350    </TabItem>
351    <TabItem Header="OCR">
352        <!-- OCR settings -->
353    </TabItem>
354    <TabItem Header="Translation">
355        <!-- Translation settings -->
356    </TabItem>
357</TabControl>
358```
359 
360## Status Bar Updates
361 
362### Status Message Pattern
363```csharp
364public void UpdateStatus(string message, StatusType type = StatusType.Info)
365{
366    Application.Current.Dispatcher.Invoke(() =>
367    {
368        StatusText.Text = message;
369        StatusText.Foreground = type switch
370        {
371            StatusType.Error => Brushes.Red,
372            StatusType.Warning => Brushes.Orange,
373            _ => Brushes.White
374        };
375        
376        // Auto-fade after 3 seconds
377        _statusTimer?.Stop();
378        _statusTimer = new DispatcherTimer
379        {
380            Interval = TimeSpan.FromSeconds(3)
381        };
382        _statusTimer.Tick += (s, e) =>
383        {
384            StatusText.Text = "";
385            _statusTimer.Stop();
386        };
387        _statusTimer.Start();
388    });
389}
390```
391 
392## Dialog Windows
393 
394### Modal Dialog Pattern
395```csharp
396var dialog = new SettingsWindow();
397dialog.Owner = this;
398dialog.ShowDialog(); // Blocks until closed
399```
400 
401### Confirmation Dialog
402```csharp
403var result = MessageBox.Show(
404    "Are you sure you want to delete this?",
405    "Confirm",
406    MessageBoxButton.YesNo,
407    MessageBoxImage.Question);
408 
409if (result == MessageBoxResult.Yes)
410{
411    // Perform action
412}
413```
414