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

[Colors] Replace ComboBox with SelectorBar #1496

Merged
merged 2 commits into from
Apr 18, 2024
Merged

[Colors] Replace ComboBox with SelectorBar #1496

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
107f7fb
Replacing combobox with selectorbar
niels9001 Mar 13, 2024
d5e84b6
Tweaks + feedback
niels9001 Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 21 additions & 25 deletions WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
x:Class="WinUIGallery.ControlPages.ColorsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
mc:Ignorable="d">

<Page.Resources>
Expand All @@ -20,30 +20,26 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="0">
<RichTextBlock>
<Paragraph>
Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.<LineBreak />
</Paragraph>
</RichTextBlock>
<TextBlock
Margin="0,0,0,6"
Style="{ThemeResource BodyStrongTextBlockStyle}"
Text="Using colors" />
<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>

<ComboBox x:Name="PageSelector" AutomationProperties.Name="PageSelector" SelectionChanged="OnSelectionChanged" Loaded="OnLoaded" Width="200" Margin="0,18,0,-18" Grid.Row="1" >
<x:String>Text</x:String>
<x:String>Fill</x:String>
<x:String>Stroke</x:String>
<x:String>Background</x:String>
<x:String>Signal</x:String>
<x:String>High Contrast</x:String>
</ComboBox>
<RichTextBlock>
<Paragraph>
Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity. 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}".<LineBreak />
</Paragraph>
<Paragraph />
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
</RichTextBlock>
<SelectorBar
x:Name="PageSelector"
Grid.Row="1"
Margin="-12,18,0,0"
AutomationProperties.Name="PageSelector"
Loaded="PageSelector_Loaded"
SelectionChanged="PageSelector_SelectionChanged">
<SelectorBarItem Text="Text" />
<SelectorBarItem Text="Fill" />
<SelectorBarItem Text="Stroke" />
<SelectorBarItem Text="Background" />
<SelectorBarItem Text="Signal" />
<SelectorBarItem Text="High Contrast" />
</SelectorBar>

<controls1:SampleThemeListener Grid.Row="2">
<Frame x:Name="NavigationFrame" />
Expand Down
37 changes: 28 additions & 9 deletions WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,62 @@
// Copyright (c) Microsoft Corporation and Contributors.
// Licensed under the MIT License.

using System;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Animation;
using WinUIGallery.DesktopWap.Controls.DesignGuidance.ColorSections;
using WinUIGallery.SamplePages;

namespace WinUIGallery.ControlPages
{
public sealed partial class ColorsPage : Page
{
int previousSelectedIndex = 0;

public ColorsPage()
{
this.InitializeComponent();
}
private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)

private void PageSelector_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
switch (PageSelector.SelectedIndex)
SelectorBarItem selectedItem = sender.SelectedItem;
int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
Type pageType;

switch (currentSelectedIndex)
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
{
case 0:
NavigationFrame.Navigate(typeof(TextSection));
pageType = typeof(TextSection);
break;
case 1:
NavigationFrame.Navigate(typeof(FillSection));
pageType = typeof(FillSection);
break;
case 2:
NavigationFrame.Navigate(typeof(StrokeSection));
pageType = typeof(StrokeSection);
break;
case 3:
NavigationFrame.Navigate(typeof(BackgroundSection));
pageType = typeof(BackgroundSection);
break;
case 4:
NavigationFrame.Navigate(typeof(SignalSection));
pageType = typeof(SignalSection);
break;
case 5:
NavigationFrame.Navigate(typeof(HighContrastSection));
pageType = typeof(HighContrastSection);
break;
default:
pageType = typeof(TextSection);
break;
}

var slideNavigationTransitionEffect = currentSelectedIndex - previousSelectedIndex > 0 ? SlideNavigationTransitionEffect.FromRight : SlideNavigationTransitionEffect.FromLeft;

NavigationFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() { Effect = slideNavigationTransitionEffect });

previousSelectedIndex = currentSelectedIndex;
}

private void OnLoaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
private void PageSelector_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
PageSelector.SelectedItem = PageSelector.Items[0];
}
Expand Down