Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using segmented control for colors page #1214

Merged
merged 2 commits into from
Mar 12, 2023
Merged

Using segmented control for colors page #1214

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bffcf5
Using segmented control
niels9001 Mar 11, 2023
4ffe4e2
Feedback
niels9001 Mar 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
58 changes: 10 additions & 48 deletions WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
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:labs="using:CommunityToolkit.Labs.WinUI"
Loaded="Page_Loaded"
mc:Ignorable="d">

<Page.Resources>
Expand All @@ -33,55 +35,15 @@
<RichTextBlock Margin="0,0,0,24">
<Paragraph>The colors below are provided as part of WinUI 3. You can reference them in your app using ThemeResource bindings. For example: Color="{ThemeResource CardBackgroundFillColorDefault}"</Paragraph>
</RichTextBlock>

</StackPanel>
<Grid
x:Name="SelectionElement"
Grid.Row="1"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<ToggleButton
HorizontalAlignment="Stretch"
Checked="ToggleButton_Checked"
CornerRadius="4,0,0,4"
IsChecked="True">
Text
</ToggleButton>
<ToggleButton
Grid.Column="1"
HorizontalAlignment="Stretch"
Checked="ToggleButton_Checked"
CornerRadius="0">
Fill
</ToggleButton>
<ToggleButton
Grid.Column="2"
HorizontalAlignment="Stretch"
Checked="ToggleButton_Checked"
CornerRadius="0">
Stroke
</ToggleButton>
<ToggleButton
Grid.Column="3"
HorizontalAlignment="Stretch"
Checked="ToggleButton_Checked"
CornerRadius="0">
Background
</ToggleButton>
<ToggleButton
Grid.Column="4"
HorizontalAlignment="Stretch"
Checked="ToggleButton_Checked"
CornerRadius="0,4,4,0">
Signal
</ToggleButton>
</Grid>
<labs:Segmented x:Name="PageSelector" HorizontalAlignment="Stretch" Grid.Row="1" SelectedIndex="0">
<labs:SegmentedItem Content="Text"/>
<labs:SegmentedItem Content="Fill"/>
<labs:SegmentedItem Content="Stroke"/>
<labs:SegmentedItem Content="Background"/>
<labs:SegmentedItem Content="Signal"/>
</labs:Segmented>

<Frame x:Name="NavigationFrame" Grid.Row="2" />
</Grid>
Expand Down
54 changes: 23 additions & 31 deletions WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
// Licensed under the MIT License.

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using WinUIGallery.DesktopWap.Controls.DesignGuidance.ColorSections;

namespace AppUIBasics.ControlPages
Expand All @@ -12,41 +11,34 @@ public sealed partial class ColorsPage : Page
public ColorsPage()
{
this.InitializeComponent();
NavigationFrame.Navigate(typeof(TextSection));
}

private void ToggleButton_Checked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
if(sender is ToggleButton item)
switch (PageSelector.SelectedIndex)
{
switch (item.Content)
{
case "Text":
NavigationFrame.Navigate(typeof(TextSection));
break;
case "Fill":
NavigationFrame.Navigate(typeof(FillSection));
break;
case "Stroke":
NavigationFrame.Navigate(typeof(StrokeSection));
break;
case "Background":
NavigationFrame.Navigate(typeof(BackgroundSection));
break;
case "Signal":
NavigationFrame.Navigate(typeof(SignalSection));
break;
}
case 0:
NavigationFrame.Navigate(typeof(TextSection));
break;
case 1:
NavigationFrame.Navigate(typeof(FillSection));
break;
case 2:
NavigationFrame.Navigate(typeof(StrokeSection));
break;
case 3:
NavigationFrame.Navigate(typeof(BackgroundSection));
break;
case 4:
NavigationFrame.Navigate(typeof(SignalSection));
break;
}
foreach(var child in SelectionElement.Children)
{
if (child != sender)
{
if (child is ToggleButton button)
}

button.IsChecked = false;
}
}
private void Page_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
PageSelector.SelectionChanged -= OnSelectionChanged;
NavigationFrame.Navigate(typeof(TextSection));
PageSelector.SelectionChanged += OnSelectionChanged;
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
3 changes: 2 additions & 1 deletion WinUIGallery/WinUIGallery.DesktopWap.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
in the WinUI repo, or the next ItemGroup below when standalone. -->
<ItemGroup>
<PackageReference Include="ColorCode.Core" />
<PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls" Version="0.0.16" />
<PackageReference Include="CommunityToolkit.Labs.WinUI.SegmentedControl" Version="0.0.2" />
<PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls" Version="0.0.17" />
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
<PackageReference Include="CommunityToolkit.WinUI.UI" Version="7.1.2" />
<PackageReference Include="CommunityToolkit.WinUI.UI.Animations" Version="7.1.2" />
<PackageReference Include="Microsoft.Graphics.Win2D" />
Expand Down