Skip to content

Commit

Permalink
Use Selectorbar for Sample Code (#1540)
Browse files Browse the repository at this point in the history 
<!--- Provide a general summary of your changes in the Title above -->

related to #1535 

Full Code (Xaml/C#)


![00002](https://github.com/microsoft/WinUI-Gallery/assets/9213496/e3e8d37f-089f-4220-96ee-b3e48c79fa26)

Single Code (Xaml Only)


![00001](https://github.com/microsoft/WinUI-Gallery/assets/9213496/b411528b-b79e-4f1f-9ba8-f42edab66fa9)


## Description

## Motivation and Context

## How Has This Been Tested?
Tested on my Laptop
## Screenshots (if appropriate):

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

---------

Co-authored-by: Jay <65828559+Jay-o-Way@users.noreply.github.com>
  • Loading branch information
@ghost1372 @Jay-o-Way @karkarl
2 people authored and karkarl committed Jul 15, 2024
1 parent d069050 commit 98c8084
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 73 deletions.
83 changes: 54 additions & 29 deletions WinUIGallery/Controls/ControlExample.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,34 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:animations="using:CommunityToolkit.WinUI.Animations"
x:Name="RootPanel"
Margin="0,16,0,0"
d:DesignHeight="250"
d:DesignWidth="1000"
mc:Ignorable="d">

<UserControl.Resources>
<animations:ImplicitAnimationSet x:Name="ShowTransitions">
<animations:OffsetAnimation EasingMode="EaseOut"
From="0,24,0"
To="0"
Duration="0:0:0.4" />
<animations:OpacityAnimation EasingMode="EaseOut"
From="0"
To="1"
Duration="0:0:0.2" />
</animations:ImplicitAnimationSet>
<animations:ImplicitAnimationSet x:Name="HideTransitions">
<animations:OffsetAnimation EasingMode="EaseOut"
From="0"
To="0,24,0"
Duration="0:0:0.2" />
<animations:OpacityAnimation EasingMode="EaseOut"
From="1"
To="0"
Duration="0:0:0.1" />
</animations:ImplicitAnimationSet>
</UserControl.Resources>
<Grid x:Name="rootGrid" Loaded="rootGrid_Loaded">
<Grid.Resources>
<ResourceDictionary>
Expand Down Expand Up @@ -138,26 +160,38 @@
<muxc:Expander.Header>
<TextBlock Text="Source code" />
</muxc:Expander.Header>
<Grid RowSpacing="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<SelectorBar x:Name="SelectorBarControl" Margin="-12,0,0,0" SelectionChanged="SelectorBarControl_SelectionChanged">
<SelectorBarItem x:Name="SelectorBarXamlItem" Loaded="SelectorBarItem_Loaded" Tag="Xaml" Text="XAML" />
<SelectorBarItem x:Name="SelectorBarCSharpItem" Loaded="SelectorBarItem_Loaded" Tag="CSharp" Text="C#" />
</SelectorBar>

<StackPanel x:DefaultBindMode="OneWay">
<controls:SampleCodePresenter
x:Name="XamlPresenter"
Code="{x:Bind Xaml}"
CodeSourceFile="{x:Bind XamlSource}"
Substitutions="{x:Bind Substitutions}" />
<Border
x:Name="SampleCodeSeparator"
Margin="0,20"
BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
BorderThickness="1"
Visibility="Collapsed" />
<controls:SampleCodePresenter
x:Name="CSharpPresenter"
Code="{x:Bind CSharp}"
CodeSourceFile="{x:Bind CSharpSource}"
SampleType="CSharp"
Substitutions="{x:Bind Substitutions}" />
</StackPanel>
<!-- using animations:Implicit... with Grid.Row causes Grid.Row to have no effect, Therefore, the Grid.Row is applied in the grid -->
<Grid x:DefaultBindMode="OneWay" Grid.Row="1">
<controls:SampleCodePresenter
x:Name="XamlPresenter"
Visibility="Collapsed"
Code="{x:Bind Xaml}"
SampleType="XAML"
CodeSourceFile="{x:Bind XamlSource}"
Substitutions="{x:Bind Substitutions}"
animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"/>
<controls:SampleCodePresenter
x:Name="CSharpPresenter"
Visibility="Collapsed"
Code="{x:Bind CSharp}"
SampleType="CSharp"
CodeSourceFile="{x:Bind CSharpSource}"
Substitutions="{x:Bind Substitutions}"
animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"/>
</Grid>
</Grid>
</muxc:Expander>

<StackPanel
Expand Down Expand Up @@ -231,15 +265,6 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="SampleCodeSeparatorStates">
<VisualState x:Name="SeparatorCollapsed" />
<VisualState x:Name="SeparatorVisible">
<VisualState.Setters>
<Setter Target="SampleCodeSeparator.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
81 changes: 67 additions & 14 deletions WinUIGallery/Controls/ControlExample.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,12 @@
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
using WinUIGallery.Common;
using WinUIGallery.Helper;
using ColorCode;
using ColorCode.Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using Windows.ApplicationModel.Core;
using Windows.Foundation;
Expand All @@ -30,7 +26,6 @@
using Microsoft.UI.Xaml.Markup;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Media.Imaging;
using System.Reflection;

namespace WinUIGallery
{
Expand Down Expand Up @@ -125,28 +120,28 @@ public object Options
set { SetValue(OptionsProperty, value); }
}

public static readonly DependencyProperty XamlProperty = DependencyProperty.Register("Xaml", typeof(string), typeof(ControlExample), new PropertyMetadata(null));
public static readonly DependencyProperty XamlProperty = DependencyProperty.Register("Xaml", typeof(string), typeof(ControlExample), new PropertyMetadata(null, OnXamlChanged));
public string Xaml
{
get { return (string)GetValue(XamlProperty); }
set { SetValue(XamlProperty, value); }
}

public static readonly DependencyProperty XamlSourceProperty = DependencyProperty.Register("XamlSource", typeof(object), typeof(ControlExample), new PropertyMetadata(null));
public static readonly DependencyProperty XamlSourceProperty = DependencyProperty.Register("XamlSource", typeof(object), typeof(ControlExample), new PropertyMetadata(null, OnXamlChanged));
public string XamlSource
{
get { return (string)GetValue(XamlSourceProperty); }
set { SetValue(XamlSourceProperty, value); }
}

public static readonly DependencyProperty CSharpProperty = DependencyProperty.Register("CSharp", typeof(string), typeof(ControlExample), new PropertyMetadata(null));
public static readonly DependencyProperty CSharpProperty = DependencyProperty.Register("CSharp", typeof(string), typeof(ControlExample), new PropertyMetadata(null, OnCSharpChanged));
public string CSharp
{
get { return (string)GetValue(CSharpProperty); }
set { SetValue(CSharpProperty, value); }
}

public static readonly DependencyProperty CSharpSourceProperty = DependencyProperty.Register("CSharpSource", typeof(object), typeof(ControlExample), new PropertyMetadata(null));
public static readonly DependencyProperty CSharpSourceProperty = DependencyProperty.Register("CSharpSource", typeof(object), typeof(ControlExample), new PropertyMetadata(null, OnCSharpChanged));
public string CSharpSource
{
get { return (string)GetValue(CSharpSourceProperty); }
Expand Down Expand Up @@ -209,12 +204,7 @@ public ControlExample()

private void ControlExample_Loaded(object sender, RoutedEventArgs e)
{
if(!XamlPresenter.IsEmpty && !CSharpPresenter.IsEmpty)
{
VisualStateManager.GoToState(this, "SeparatorVisible", false);
}
HeaderTextPresenter.Visibility = string.IsNullOrEmpty(HeaderText) ? Visibility.Collapsed : Visibility.Visible;

}

private void rootGrid_Loaded(object sender, RoutedEventArgs e)
Expand Down Expand Up @@ -432,5 +422,68 @@ private void EvaluatePadding()
break;
}
}
private void SelectorBarItem_Loaded(object sender, RoutedEventArgs e)
{
var item = sender as SelectorBarItem;
if (item == null)
return;

if (item.Tag.ToString().Equals("Xaml", StringComparison.OrdinalIgnoreCase))
{
item.Visibility = string.IsNullOrEmpty(Xaml) && string.IsNullOrEmpty(XamlSource) ? Visibility.Collapsed : Visibility.Visible;
}
else if (item.Tag.ToString().Equals("CSharp", StringComparison.OrdinalIgnoreCase))
{
item.Visibility = string.IsNullOrEmpty(CSharp) && string.IsNullOrEmpty(CSharpSource) ? Visibility.Collapsed : Visibility.Visible;
}

var firstVisibileItem = SelectorBarControl.Items.Where(x => x.Visibility == Visibility.Visible).FirstOrDefault();
if (firstVisibileItem != null)
{
firstVisibileItem.IsSelected = true;
}

HandlePresenterVisibility();
}

private static void OnXamlChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var ctrl = (ControlExample)d;
if (ctrl != null)
{
ctrl.SelectorBarItem_Loaded(ctrl.SelectorBarXamlItem, null);
}
}
private static void OnCSharpChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var ctrl = (ControlExample)d;
if (ctrl != null)
{
ctrl.SelectorBarItem_Loaded(ctrl.SelectorBarCSharpItem, null);
}
}

private void SelectorBarControl_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
{
HandlePresenterVisibility();
}

private void HandlePresenterVisibility()
{
var selectedItem = SelectorBarControl.SelectedItem;
if (selectedItem != null)
{
if (selectedItem.Tag.ToString().Equals("Xaml", StringComparison.OrdinalIgnoreCase))
{
XamlPresenter.Visibility = Visibility.Visible;
CSharpPresenter.Visibility = Visibility.Collapsed;
}
else if (selectedItem.Tag.ToString().Equals("CSharp", StringComparison.OrdinalIgnoreCase))
{
CSharpPresenter.Visibility = Visibility.Visible;
XamlPresenter.Visibility = Visibility.Collapsed;
}
}
}
}
}
29 changes: 7 additions & 22 deletions WinUIGallery/Controls/SampleCodePresenter.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,55 +15,40 @@
BorderBrush="{Binding BorderBrush, Mode=OneWay}"
BorderThickness="{Binding BorderThickness, Mode=OneWay}"
CornerRadius="{Binding CornerRadius, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="SampleHeader" FontWeight="SemiBold" />
<ScrollViewer
x:Name="CodeScrollViewer"
Grid.Row="1"
VerticalAlignment="{Binding VerticalContentAlignment, Mode=OneWay}"
HorizontalScrollBarVisibility="Auto"
HorizontalScrollMode="Auto"
VerticalScrollBarVisibility="Disabled"
VerticalScrollMode="Disabled">
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<ContentPresenter
x:Name="CodePresenter"
Margin="0,0,0,16"
Loaded="CodePresenter_Loaded" />
</ScrollViewer>
<local:CopyButton
x:Name="CopyCodeButton"
Grid.Row="0"
HorizontalAlignment="Right"
Click="CopyCodeButton_Click"
VerticalAlignment="Top"
Grid.Column="1"
Margin="5,0,0,0"
Content="&#xE8C8;" />

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SampleProgrammingLanguageState">
<VisualState x:Name="XAMLSample">
<VisualState.Setters>
<Setter Target="SampleHeader.Text" Value="XAML" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CSharpSample">
<VisualState.Setters>
<Setter Target="SampleHeader.Text" Value="C#" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="XAMLSample"/>
<VisualState x:Name="CSharpSample"/>
<VisualState x:Name="InlineSample">
<VisualState.Setters>
<Setter Target="SampleHeader.Visibility" Value="Collapsed" />
<Setter Target="CodeScrollViewer.(Grid.Row)" Value="0" />
<Setter Target="CodeScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Target="CodeScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Target="CopyCodeButton.(Grid.Column)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
Expand Down
9 changes: 1 addition & 8 deletions WinUIGallery/Controls/SampleCodePresenter.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,20 @@
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using WinUIGallery.Helper;
using ColorCode;
using ColorCode.Common;
using Windows.ApplicationModel.DataTransfer;
using Windows.Storage;
using Windows.System;
using Windows.UI.Core;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;
using WinUIGallery.Common;
using System.Reflection;
using System.IO;
using Microsoft.UI.Xaml.Automation;

namespace WinUIGallery.Controls
{

public enum SampleCodePresenterType
{
XAML,
Expand Down Expand Up @@ -176,7 +171,6 @@ private async void FormatAndRenderSampleFromFile(string sourceRelativePath, Cont
{
if (sourceRelativePath != null && sourceRelativePath.EndsWith("txt"))
{

string sampleString = null;
StorageFile file = null;
if (!NativeHelper.IsAppPackaged)
Expand Down Expand Up @@ -227,11 +221,10 @@ private void FormatAndRenderSampleFromString(string sampleString, ContentPresent

actualCode = sampleString;

var name = GetSampleLanguageVisualState() == "InlineSample" ? actualCode : SampleHeader.Text;
var name = GetSampleLanguageVisualState() == "InlineSample" ? actualCode : SampleType.ToString();
var automationName = "Copy " + name + " Code";
AutomationProperties.SetName(CopyCodeButton, automationName);


var formatter = GenerateRichTextFormatter();
if (SampleType == SampleCodePresenterType.Inline)
{
Expand Down

0 comments on commit 98c8084

Please sign in to comment.