Skip to content

Commit 427d72b

Browse files
Copilotefargas
Copilot
and
efargas
committed
Refactor sidebar views to use reusable SidebarSection control and shared ListBox styles
Co-authored-by: efargas <9705611+efargas@users.noreply.github.com>
1 parent 409beb0 commit 427d72b

File tree

6 files changed

+178
-158
lines changed

6 files changed

+178
-158
lines changed

‎src/S7Tools/Controls/SidebarSection.axaml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<UserControl xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
4+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5+
xmlns:icons="using:Projektanker.Icons.Avalonia"
6+
xmlns:sys="clr-namespace:System;assembly=mscorlib"
7+
xmlns:controls="using:S7Tools.Controls"
8+
mc:Ignorable="d" d:DesignWidth="240" d:DesignHeight="400"
9+
x:Class="S7Tools.Controls.SidebarSection"
10+
x:DataType="controls:SidebarSection"
11+
x:CompileBindings="False">
12+
13+
<UserControl.Styles>
14+
<StyleInclude Source="/Styles/SidebarStyles.axaml" />
15+
</UserControl.Styles>
16+
17+
<Border Classes="CategorySection">
18+
<Expander IsExpanded="{Binding $parent[controls:SidebarSection].IsExpanded}">
19+
<Expander.Header>
20+
<Grid Background="Transparent" Height="32" Margin="4,0">
21+
<Grid.ColumnDefinitions>
22+
<ColumnDefinition Width="Auto" />
23+
<ColumnDefinition Width="Auto" />
24+
<ColumnDefinition Width="*" />
25+
</Grid.ColumnDefinitions>
26+
<icons:Icon Grid.Column="0" Classes="CategoryIcon ExpanderArrow" />
27+
<icons:Icon Grid.Column="1" Classes="CategoryIcon" Value="{Binding $parent[controls:SidebarSection].Icon}" />
28+
<TextBlock Grid.Column="2" Classes="CategoryHeader" Text="{Binding $parent[controls:SidebarSection].Title}" />
29+
</Grid>
30+
</Expander.Header>
31+
<ListBox ItemsSource="{Binding $parent[controls:SidebarSection].ItemsSource}"
32+
SelectedItem="{Binding $parent[controls:SidebarSection].SelectedItem, Mode=TwoWay}"
33+
Classes="SidebarList"
34+
Background="Transparent"
35+
BorderThickness="0"
36+
Margin="8,0,8,8"
37+
SelectionMode="Single">
38+
<ListBox.ItemTemplate>
39+
<DataTemplate DataType="sys:String">
40+
<StackPanel Orientation="Horizontal" Spacing="8">
41+
<icons:Icon Classes="BulletIcon" />
42+
<TextBlock Text="{Binding}" Foreground="#CCCCCC" FontSize="13"/>
43+
</StackPanel>
44+
</DataTemplate>
45+
</ListBox.ItemTemplate>
46+
</ListBox>
47+
</Expander>
48+
</Border>
49+
50+
</UserControl>

‎src/S7Tools/Controls/SidebarSection.axaml.cs‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
using System.Collections;
2+
using Avalonia;
3+
using Avalonia.Controls;
4+
5+
namespace S7Tools.Controls;
6+
7+
/// <summary>
8+
/// Reusable sidebar section control with expandable header and list of items.
9+
/// </summary>
10+
public partial class SidebarSection : UserControl
11+
{
12+
/// <summary>
13+
/// Defines the Title property.
14+
/// </summary>
15+
public static readonly StyledProperty<string> TitleProperty =
16+
AvaloniaProperty.Register<SidebarSection, string>(nameof(Title), "Section");
17+
18+
/// <summary>
19+
/// Defines the Icon property.
20+
/// </summary>
21+
public static readonly StyledProperty<string> IconProperty =
22+
AvaloniaProperty.Register<SidebarSection, string>(nameof(Icon), "fa-solid fa-folder");
23+
24+
/// <summary>
25+
/// Defines the ItemsSource property.
26+
/// </summary>
27+
public static readonly StyledProperty<IEnumerable?> ItemsSourceProperty =
28+
AvaloniaProperty.Register<SidebarSection, IEnumerable?>(nameof(ItemsSource));
29+
30+
/// <summary>
31+
/// Defines the SelectedItem property.
32+
/// </summary>
33+
public static readonly StyledProperty<object?> SelectedItemProperty =
34+
AvaloniaProperty.Register<SidebarSection, object?>(nameof(SelectedItem), defaultBindingMode: Avalonia.Data.BindingMode.TwoWay);
35+
36+
/// <summary>
37+
/// Defines the IsExpanded property.
38+
/// </summary>
39+
public static readonly StyledProperty<bool> IsExpandedProperty =
40+
AvaloniaProperty.Register<SidebarSection, bool>(nameof(IsExpanded), true);
41+
42+
/// <summary>
43+
/// Gets or sets the section title.
44+
/// </summary>
45+
public string Title
46+
{
47+
get => GetValue(TitleProperty);
48+
set => SetValue(TitleProperty, value);
49+
}
50+
51+
/// <summary>
52+
/// Gets or sets the icon value (Font Awesome icon name).
53+
/// </summary>
54+
public string Icon
55+
{
56+
get => GetValue(IconProperty);
57+
set => SetValue(IconProperty, value);
58+
}
59+
60+
/// <summary>
61+
/// Gets or sets the items source for the list.
62+
/// </summary>
63+
public IEnumerable? ItemsSource
64+
{
65+
get => GetValue(ItemsSourceProperty);
66+
set => SetValue(ItemsSourceProperty, value);
67+
}
68+
69+
/// <summary>
70+
/// Gets or sets the selected item.
71+
/// </summary>
72+
public object? SelectedItem
73+
{
74+
get => GetValue(SelectedItemProperty);
75+
set => SetValue(SelectedItemProperty, value);
76+
}
77+
78+
/// <summary>
79+
/// Gets or sets whether the section is expanded.
80+
/// </summary>
81+
public bool IsExpanded
82+
{
83+
get => GetValue(IsExpandedProperty);
84+
set => SetValue(IsExpandedProperty, value);
85+
}
86+
87+
public SidebarSection()
88+
{
89+
InitializeComponent();
90+
}
91+
}

‎src/S7Tools/Styles/SidebarStyles.axaml‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,19 @@
5656
</Style>
5757

5858
<!-- Category item styling -->
59-
<Style Selector=".CategoryItem">
59+
<Style Selector="Border.CategoryItem" x:DataType="Border">
6060
<Setter Property="Background" Value="Transparent" />
6161
<Setter Property="Padding" Value="8,6" />
6262
<Setter Property="Margin" Value="0,2" />
6363
<Setter Property="CornerRadius" Value="4" />
6464
<Setter Property="Cursor" Value="Hand" />
6565
</Style>
6666

67-
<Style Selector=".CategoryItem:pointerover">
67+
<Style Selector="Border.CategoryItem:pointerover" x:DataType="Border">
6868
<Setter Property="Background" Value="#2A2D2E" />
6969
</Style>
7070

71-
<Style Selector=".CategoryItem.selected">
71+
<Style Selector="Border.CategoryItem.selected" x:DataType="Border">
7272
<Setter Property="Background" Value="#37373D" />
7373
</Style>
7474

@@ -77,4 +77,20 @@
7777
<Setter Property="FontSize" Value="13" />
7878
</Style>
7979

80+
<!-- ListBoxItem styling for sidebar navigation -->
81+
<Style Selector="ListBox.SidebarList > ListBoxItem">
82+
<Setter Property="Padding" Value="8,6"/>
83+
<Setter Property="Margin" Value="0,2"/>
84+
<Setter Property="Background" Value="Transparent"/>
85+
<Setter Property="CornerRadius" Value="4"/>
86+
</Style>
87+
88+
<Style Selector="ListBox.SidebarList > ListBoxItem:selected">
89+
<Setter Property="Background" Value="#37373D"/>
90+
</Style>
91+
92+
<Style Selector="ListBox.SidebarList > ListBoxItem:pointerover">
93+
<Setter Property="Background" Value="#2A2D2E"/>
94+
</Style>
95+
8096
</Styles>

‎src/S7Tools/Views/JobsSidebarView.axaml‎

Lines changed: 6 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,19 @@
33
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:vm="using:S7Tools.ViewModels"
6-
xmlns:sys="clr-namespace:System;assembly=mscorlib"
7-
xmlns:icons="using:Projektanker.Icons.Avalonia"
6+
xmlns:controls="using:S7Tools.Controls"
87
mc:Ignorable="d" d:DesignWidth="240" d:DesignHeight="600"
98
x:Class="S7Tools.Views.JobsSidebarView"
109
x:DataType="vm:JobsManagementViewModel"
1110
Background="#252526">
1211

13-
<UserControl.Styles>
14-
<StyleInclude Source="/Styles/SidebarStyles.axaml" />
15-
</UserControl.Styles>
16-
1712
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
1813
<StackPanel Spacing="0" Margin="0">
19-
<!-- Jobs Section -->
20-
<Border Classes="CategorySection">
21-
<Expander IsExpanded="True">
22-
<Expander.Header>
23-
<Grid Background="Transparent" Height="32" Margin="4,0">
24-
<Grid.ColumnDefinitions>
25-
<ColumnDefinition Width="Auto" />
26-
<ColumnDefinition Width="Auto" />
27-
<ColumnDefinition Width="*" />
28-
</Grid.ColumnDefinitions>
29-
<icons:Icon Grid.Column="0" Classes="CategoryIcon ExpanderArrow" />
30-
<icons:Icon Grid.Column="1" Classes="CategoryIcon" Value="fa-solid fa-briefcase" />
31-
<TextBlock Grid.Column="2" Classes="CategoryHeader" Text="JOB MANAGEMENT" />
32-
</Grid>
33-
</Expander.Header>
34-
<ListBox ItemsSource="{Binding SideMenuItems}"
35-
SelectedItem="{Binding SelectedSideMenuItem, Mode=TwoWay}"
36-
Background="Transparent"
37-
BorderThickness="0"
38-
Margin="8,0,8,8"
39-
SelectionMode="Single">
40-
<ListBox.Styles>
41-
<Style Selector="ListBoxItem">
42-
<Setter Property="Padding" Value="8,6"/>
43-
<Setter Property="Margin" Value="0,2"/>
44-
<Setter Property="Background" Value="Transparent"/>
45-
<Setter Property="CornerRadius" Value="4"/>
46-
</Style>
47-
<Style Selector="ListBoxItem:selected">
48-
<Setter Property="Background" Value="#37373D"/>
49-
</Style>
50-
<Style Selector="ListBoxItem:pointerover">
51-
<Setter Property="Background" Value="#2A2D2E"/>
52-
</Style>
53-
</ListBox.Styles>
54-
<ListBox.ItemTemplate>
55-
<DataTemplate DataType="sys:String">
56-
<StackPanel Orientation="Horizontal" Spacing="8">
57-
<icons:Icon Classes="BulletIcon" />
58-
<TextBlock Text="{Binding}" Foreground="#CCCCCC" FontSize="13"/>
59-
</StackPanel>
60-
</DataTemplate>
61-
</ListBox.ItemTemplate>
62-
</ListBox>
63-
</Expander>
64-
</Border>
14+
<controls:SidebarSection Title="JOB MANAGEMENT"
15+
Icon="fa-solid fa-briefcase"
16+
ItemsSource="{Binding SideMenuItems}"
17+
SelectedItem="{Binding SelectedSideMenuItem, Mode=TwoWay}"
18+
IsExpanded="True" />
6519
</StackPanel>
6620
</ScrollViewer>
6721
</UserControl>

‎src/S7Tools/Views/SettingsCategoriesView.axaml‎

Lines changed: 6 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,19 @@
33
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
44
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
55
xmlns:vm="using:S7Tools.ViewModels"
6-
xmlns:sys="clr-namespace:System;assembly=mscorlib"
7-
xmlns:icons="using:Projektanker.Icons.Avalonia"
6+
xmlns:controls="using:S7Tools.Controls"
87
mc:Ignorable="d" d:DesignWidth="240" d:DesignHeight="650"
98
x:Class="S7Tools.Views.SettingsCategoriesView"
109
x:DataType="vm:SettingsViewModel"
1110
Background="#252526">
1211

13-
<UserControl.Styles>
14-
<StyleInclude Source="/Styles/SidebarStyles.axaml" />
15-
</UserControl.Styles>
16-
1712
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
1813
<StackPanel Spacing="0" Margin="0">
19-
<!-- Settings Section -->
20-
<Border Classes="CategorySection">
21-
<Expander IsExpanded="True">
22-
<Expander.Header>
23-
<Grid Background="Transparent" Height="32" Margin="4,0">
24-
<Grid.ColumnDefinitions>
25-
<ColumnDefinition Width="Auto" />
26-
<ColumnDefinition Width="Auto" />
27-
<ColumnDefinition Width="*" />
28-
</Grid.ColumnDefinitions>
29-
<icons:Icon Grid.Column="0" Classes="CategoryIcon ExpanderArrow" />
30-
<icons:Icon Grid.Column="1" Classes="CategoryIcon" Value="fa-solid fa-cog" />
31-
<TextBlock Grid.Column="2" Classes="CategoryHeader" Text="SETTINGS" />
32-
</Grid>
33-
</Expander.Header>
34-
<ListBox ItemsSource="{Binding Categories}"
35-
SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
36-
Background="Transparent"
37-
BorderThickness="0"
38-
Margin="8,0,8,8"
39-
SelectionMode="Single">
40-
<ListBox.Styles>
41-
<Style Selector="ListBoxItem">
42-
<Setter Property="Padding" Value="8,6"/>
43-
<Setter Property="Margin" Value="0,2"/>
44-
<Setter Property="Background" Value="Transparent"/>
45-
<Setter Property="CornerRadius" Value="4"/>
46-
</Style>
47-
<Style Selector="ListBoxItem:selected">
48-
<Setter Property="Background" Value="#37373D"/>
49-
</Style>
50-
<Style Selector="ListBoxItem:pointerover">
51-
<Setter Property="Background" Value="#2A2D2E"/>
52-
</Style>
53-
</ListBox.Styles>
54-
<ListBox.ItemTemplate>
55-
<DataTemplate DataType="sys:String">
56-
<StackPanel Orientation="Horizontal" Spacing="8">
57-
<icons:Icon Classes="BulletIcon" />
58-
<TextBlock Text="{Binding}" Foreground="#CCCCCC" FontSize="13"/>
59-
</StackPanel>
60-
</DataTemplate>
61-
</ListBox.ItemTemplate>
62-
</ListBox>
63-
</Expander>
64-
</Border>
14+
<controls:SidebarSection Title="SETTINGS"
15+
Icon="fa-solid fa-cog"
16+
ItemsSource="{Binding Categories}"
17+
SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
18+
IsExpanded="True" />
6519
</StackPanel>
6620
</ScrollViewer>
6721
</UserControl>

0 commit comments

Comments
 (0)