Skip to content

Commit

Permalink
Playground Control catalog
Browse files Browse the repository at this point in the history
  • Loading branch information
kikipoulet committed Feb 6, 2024
1 parent 8485a0a commit ecca5ec
Show file tree
Hide file tree
Showing 3 changed files with 278 additions and 4 deletions.
112 changes: 110 additions & 2 deletions SukiUI.Demo/Features/Playground/PlaygroundView.axaml
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,117 @@
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:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit"
xmlns:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit" x:DataType="playground:PlaygroundViewModel"
xmlns:controls="clr-namespace:SukiUI.Controls;assembly=SukiUI"
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
xmlns:playground="clr-namespace:SukiUI.Demo.Features.Playground"
xmlns:theme="clr-namespace:SukiUI.Theme;assembly=SukiUI"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="SukiUI.Demo.Features.Playground.PlaygroundView">
<controls:SukiStackPage>
<controls:SukiStackPage.Content>
<Grid Name="Playground" ColumnDefinitions="*, 4, *">

<SplitView IsPaneOpen="False" Name="Playground" DisplayMode="CompactInline" OpenPaneLength="250" CompactPaneLength="50">
<SplitView.Pane>
<Grid>

<DockPanel IsHitTestVisible="False" Opacity="0" Name="TabControls" >
<Button DockPanel.Dock="Top" Click="ClosePane" Margin="0,25" IsHitTestVisible="True" Opacity="1" Padding="0" HorizontalAlignment="Center" VerticalAlignment="Top" Classes="Basic">
<StackPanel>
<TextBlock HorizontalAlignment="Center" Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Close"></TextBlock>
<avalonia:MaterialIcon Kind="ChevronLeft" Foreground="{DynamicResource SukiLowText}"></avalonia:MaterialIcon>
</StackPanel>
</Button>
<TabControl Margin="0,20,0,0" TabStripPlacement="Left" >

<TabItem Header="Buttons">
<ScrollViewer>
<ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ButtonsElements }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" CornerRadius="10" IsInteractive="True" Margin="0,8" MinHeight="100">
<Viewbox StretchDirection="DownOnly">
<ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
</Viewbox>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
<TabItem Header="Layout">
<ScrollViewer>
<ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding LayoutElements }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" CornerRadius="10" IsInteractive="True" Margin="0,8" MinHeight="100">
<Viewbox StretchDirection="DownOnly">
<ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
</Viewbox>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
<TabItem Header="Input">
<ScrollViewer>
<ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding InputsElements }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
<Viewbox StretchDirection="DownOnly">
<ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
</Viewbox>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
<TabItem Header="Progress">
<ScrollViewer>
<ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ProgressElements }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
<Viewbox StretchDirection="DownOnly">
<ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
</Viewbox>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
<TabItem Header="Lists">
<ScrollViewer>
<ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ListsElements }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
<Viewbox StretchDirection="DownOnly">
<ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
</Viewbox>
</controls:GlassCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</TabItem>
</TabControl>
</DockPanel>

<Button Click="OpenPane" Name="OpenPaneButton" Margin="0,25" IsHitTestVisible="True" Opacity="1" Padding="0" HorizontalAlignment="Center" VerticalAlignment="Top" Classes="Basic">
<StackPanel>
<TextBlock HorizontalAlignment="Center" Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Add"></TextBlock>
<TextBlock HorizontalAlignment="Center" Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Controls"></TextBlock>
<avalonia:MaterialIcon Kind="ChevronRight" Foreground="{DynamicResource SukiLowText}"></avalonia:MaterialIcon>
</StackPanel>
</Button>
</Grid>
</SplitView.Pane>
<Grid ColumnDefinitions="*, 4, *" RowDefinitions="*, Auto">
<controls:GlassCard Margin="20">
<avaloniaEdit:TextEditor TextChanged="Editor_OnTextChanged" Text="" Name="Editor"
ShowLineNumbers="True"
Expand All @@ -17,7 +121,11 @@
<GridSplitter Grid.Column="1" Background="Transparent" ResizeDirection="Columns"/>
<controls:GlassCard Name="GlassExample" Grid.Column="2" Margin="20">
</controls:GlassCard>



</Grid>
</SplitView>
</controls:SukiStackPage.Content>
</controls:SukiStackPage>
</UserControl>
32 changes: 31 additions & 1 deletion SukiUI.Demo/Features/Playground/PlaygroundView.axaml.cs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
using Avalonia.Media;
using Avalonia.Styling;
Expand Down Expand Up @@ -102,7 +103,7 @@ private void textEditor_TextArea_TextEntered(object sender, TextInputEventArgs e

private void Editor_OnTextChanged(object? sender, EventArgs e)
{
string PreviewCode = "<Grid xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
string PreviewCode = "<Grid HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" xmlns:system=\"clr-namespace:System;assembly=netstandard\" xmlns:objectModel=\"clr-namespace:System.Collections.ObjectModel;assembly=System.ObjectModel\" xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
_textEditor.Text + "</Grid>";

try
Expand Down Expand Up @@ -131,6 +132,35 @@ private void Editor_OnTextChanged(object? sender, EventArgs e)
" </Grid>\n" +
"</suki:GlassCard>";


private void OpenPane(object? sender, RoutedEventArgs e)
{
this.Get<SplitView>("Playground").IsPaneOpen = true;

((Button)sender).IsHitTestVisible = false;
((Button)sender).Animate<double>(OpacityProperty,1,0);

this.Get<DockPanel>("TabControls").Animate<double>(OpacityProperty,0,1);
this.Get<DockPanel>("TabControls").IsHitTestVisible = true;
}

private void ClosePane(object? sender, RoutedEventArgs e)
{
this.Get<SplitView>("Playground").IsPaneOpen = false;

this.Get<Button>("OpenPaneButton").IsHitTestVisible = true;
this.Get<Button>("OpenPaneButton").Animate<double>(OpacityProperty,0,1);

this.Get<DockPanel>("TabControls").Animate<double>(OpacityProperty,1,0);
this.Get<DockPanel>("TabControls").IsHitTestVisible = false;
}

private void AddNewControls(object? sender, PointerPressedEventArgs e)
{

_textEditor.Text = _textEditor.Text.Insert(_textEditor.CaretOffset, ((GlassCard)sender).Tag.ToString());

}
}


Expand Down
138 changes: 137 additions & 1 deletion SukiUI.Demo/Features/Playground/PlaygroundViewModel.cs
Original file line number Diff line number Diff line change
@@ -1,12 +1,148 @@
using Material.Icons;
using System;
using System.Collections.ObjectModel;
using System.Globalization;
using Avalonia.Controls;
using Avalonia.Data.Converters;
using Avalonia.Markup.Xaml;
using CommunityToolkit.Mvvm.ComponentModel;
using Material.Icons;
using SukiUI.Theme;

namespace SukiUI.Demo.Features.Playground
{
public class PlaygroundViewModel : DemoPageBase
{
public PlaygroundViewModel() : base("Playground", MaterialIconKind.Pencil, -150)
{
}

public ObservableCollection<string> ButtonsElements { get; set; } = new ObservableCollection<string>()
{
"<Button Classes=\"Flat\" Content=\"Flat\" />",
"<Button Classes=\"Flat Rounded\" Content=\"Rounded\" />",
"<Button Classes=\"Basic\" Content=\"Basic\" />",
"<Button Content=\"Neutral\" />",
"<Button Classes=\"Outlined\" Content=\"Outlined\" />",
"<Button Classes=\"Flat Large\" Content=\"Button\" />"
};

public ObservableCollection<string> InputsElements { get; set; } = new ObservableCollection<string>()
{
"<TextBox Text=\"Textbox\" />",
"<ToggleSwitch />",
"<ToggleButton Content=\"Toggle Me\" />",
"<Slider MinWidth=\"120\" IsSnapToTickEnabled=\"True\" Maximum=\"100\" Minimum=\"0\" TickFrequency=\"1\" Value=\"50\"></Slider>",

"<ComboBox PlaceholderText=\"Select a Color\">\n" +
" <ComboBoxItem>\n" +
" <TextBlock>Red</TextBlock>\n" +
" </ComboBoxItem>\n" +
"</ComboBox>\n" ,

"<CheckBox IsChecked=\"True\" />\n" ,


"<RadioButton >Item 1</RadioButton>",

"<NumericUpDown></NumericUpDown>",
"<DatePicker />"



};

public ObservableCollection<string> ProgressElements { get; set; } = new ObservableCollection<string>()
{
"<suki:WaveProgress Value=\"40\" IsTextVisible=\"True\" />\n" ,

"<suki:Stepper Margin=\"30,15\" Index=\"1\">\n" +
" <suki:Stepper.Steps>\n" +
" <objectModel:ObservableCollection x:TypeArguments=\"system:String\">\n" +
" <system:String>Step One</system:String>\n" +
" <system:String>Step Two</system:String>\n" +
" </objectModel:ObservableCollection>\n" +
" </suki:Stepper.Steps>\n" +
"</suki:Stepper>\n" ,

"<suki:Stepper AlternativeStyle=\"True\" Margin=\"30,15\" Index=\"1\">\n" +
" <suki:Stepper.Steps>\n" +
" <objectModel:ObservableCollection x:TypeArguments=\"system:String\">\n" +
" <system:String>Step One</system:String>\n" +
" <system:String>Step Two</system:String>\n" +

" </objectModel:ObservableCollection>\n" +
" </suki:Stepper.Steps>\n" +
"</suki:Stepper>\n" ,

"<suki:CircleProgressBar Height=\"130\" StrokeWidth=\"11\" Value=\"60\" Width=\"130\">\n" +
" <TextBlock Margin=\"0,1,0,0\" Classes=\"h3\">60%</TextBlock>\n" +
"</suki:CircleProgressBar>\n" ,

"<suki:CircleProgressBar IsIndeterminate=\"True\" />",

"<suki:Loading />",

"<ProgressBar Value=\"60\" />" ,
"<ProgressBar Value=\"50\" ShowProgressText=\"True\" />",
"<ProgressBar IsIndeterminate=\"True\" />",
};

public ObservableCollection<string> ListsElements { get; set; } = new ObservableCollection<string>()
{
"<ListBox>\n" +
" <TextBlock>item 1</TextBlock>\n" +
" <TextBlock>item 2</TextBlock>\n" +
" <TextBlock>item 3</TextBlock>\n" +
"</ListBox>",

"<TreeView >\n" +
" <TreeViewItem Header=\"Test 1\">\n" +
" <TreeViewItem Header=\"Test 2\" />\n" +
" <TreeViewItem Header=\"Test 3\" />\n" +
" </TreeViewItem>\n" +
" <TreeViewItem Header=\"Test 4\" />\n" +
"</TreeView>"
};

public ObservableCollection<string> LayoutElements { get; set; } = new ObservableCollection<string>()
{
"<suki:GlassCard />",

"<suki:GroupBox Header=\"Header\">\n" +
" <Grid Height=\"100\" Width=\"300\">\n" +
" <TextBlock VerticalAlignment=\"Center\" HorizontalAlignment=\"Center\">Test Content</TextBlock>\n" +
" </Grid>\n" +
"</suki:GroupBox>" ,

"<Expander Header=\"Click To Expand\">\n" +
" <TextBlock>Expanded</TextBlock>\n" +
"</Expander>",

"<TabControl>\n" +
" <TabItem Header=\"Red Tab\">\n" +
" <Grid Background=\"#44ff0000\" />\n" +
" </TabItem>\n" +
"</TabControl>"
};

}

public class StringToControlConverter : IValueConverter
{
public static readonly StringToControlConverter Instance = new();

public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
string PreviewCode = "<Grid HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" xmlns:system=\"clr-namespace:System;assembly=netstandard\" xmlns:objectModel=\"clr-namespace:System.Collections.ObjectModel;assembly=System.ObjectModel\" xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
value + "</Grid>";

return AvaloniaRuntimeXamlLoader.Parse<Grid>(PreviewCode);

}

public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
}

0 comments on commit ecca5ec

Please sign in to comment.