t/SimpleDraw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved Menu into SplitView - Added Button to open SplitView

Browse Source
This commit is contained in:
Ano-sys
2025-02-20 23:19:34 +01:00
parent d4d7006dcb
commit 1177efcc58
4 changed files with 130 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SimpleDraw.csproj
+2 -2
View File
@@ -19,7 +19,7 @@
<PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.4" /> <PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.4" />
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.--> <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.2.4" /> <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.2.4" />
<PackageReference Include="Avalonia.Xaml.Interactions" Version="11.2.0.8" /> <PackageReference Include="Avalonia.Xaml.Interactions" Version="11.2.0.9" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1"/> <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
</ItemGroup> </ItemGroup>
</Project> </Project>
ViewModels/MainWindowViewModel.cs
+4 -1
View File
@@ -1,4 +1,5 @@
using Avalonia; using System;
using Avalonia;
using Avalonia.Input; using Avalonia.Input;
using Avalonia.Media; using Avalonia.Media;
using CommunityToolkit.Mvvm.Input; using CommunityToolkit.Mvvm.Input;
@@ -11,6 +12,8 @@ public class MainWindowViewModel : ViewModelBase
#pragma warning disable CA1822 // Mark members as static #pragma warning disable CA1822 // Mark members as static
public MainWindowViewModel() public MainWindowViewModel()
{ {
DisplaySplitEvent = new RelayCommand(DisplaySplit);
ColorPalette = ColorPalette =
[ [
new ColorPickerButton new ColorPickerButton
ViewModels/ViewModelBase.cs
+24 -1
View File
@@ -1,4 +1,5 @@
using System.Collections.ObjectModel; using System;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations;
using Avalonia.Input; using Avalonia.Input;
using Avalonia.Media; using Avalonia.Media;
@@ -36,4 +37,26 @@ public class ViewModelBase : ObservableObject
get => _brushThickness; get => _brushThickness;
set => SetProperty(ref _brushThickness, value); set => SetProperty(ref _brushThickness, value);
} }
private double _buttonOffset = 0;
public double ButtonOffset
{
get => _buttonOffset;
set => SetProperty(ref _buttonOffset, value);
}
private bool _isSplitOpen = false;
public bool IsSplitOpen
{
get => _isSplitOpen;
set => SetProperty(ref _isSplitOpen, value);
}
public IRelayCommand DisplaySplitEvent { get; protected set; }
protected void DisplaySplit()
{
IsSplitOpen = !IsSplitOpen;
}
} }
Views/MainWindow.axaml
+100 -84
View File
@@ -11,6 +11,9 @@
xmlns:componentModel="clr-namespace:CommunityToolkit.Mvvm.ComponentModel;assembly=CommunityToolkit.Mvvm" xmlns:componentModel="clr-namespace:CommunityToolkit.Mvvm.ComponentModel;assembly=CommunityToolkit.Mvvm"
xmlns:system="clr-namespace:System;assembly=System.Runtime" xmlns:system="clr-namespace:System;assembly=System.Runtime"
x:DataType="vm:MainWindowViewModel" x:DataType="vm:MainWindowViewModel"
TransparencyLevelHint="Transparent"
TransparencyBackgroundFallback="DimGray"
Background="Transparent"
Icon="/Assets/avalonia-logo.ico" Icon="/Assets/avalonia-logo.ico"
Title="SimpleDraw" Title="SimpleDraw"
Width="{Binding WindowWidth}" Width="{Binding WindowWidth}"
@@ -28,96 +31,109 @@
to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) --> to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
<vm:MainWindowViewModel/> <vm:MainWindowViewModel/>
</Design.DataContext> </Design.DataContext>
<DockPanel> <Panel Background="Transparent">
<Menu DockPanel.Dock="Top"> <SplitView Background="Transparent" IsPaneOpen="{Binding IsSplitOpen, Mode=TwoWay}" DisplayMode="Overlay" OpenPaneLength="250">
<MenuItem Header="_File"> <SplitView.Pane>
<MenuItem Header="_Open..."/> <Border Background="Transparent" BorderBrush="Gray" BorderThickness="2">
<Separator/> <Grid Background="Transparent">
<MenuItem Header="_Exit"/> <Grid Background="Transparent">
</MenuItem> <Grid.RowDefinitions>
<MenuItem Header="_Edit"> <RowDefinition Height="25"></RowDefinition>
<MenuItem Header="Copy"/> <RowDefinition Height="50*"></RowDefinition>
<MenuItem Header="Paste"/> <RowDefinition Height="50*"></RowDefinition>
</MenuItem> <RowDefinition Height="50*"></RowDefinition>
</Menu> </Grid.RowDefinitions>
<Grid Background="Gray"> <DockPanel Grid.Row="0" Background="Transparent">
<Grid.ColumnDefinitions> <Menu DockPanel.Dock="Top" Background="Transparent" HorizontalAlignment="Left">
<ColumnDefinition Width="105"></ColumnDefinition> <MenuItem Header="_File">
<ColumnDefinition Width="1*" MinWidth="300"></ColumnDefinition> <MenuItem Header="_Open..."/>
</Grid.ColumnDefinitions> <Separator/>
<Grid Grid.Column="0" Background="LightGray"> <MenuItem Header="_Exit"/>
<Grid.RowDefinitions> </MenuItem>
<RowDefinition Height="50*"></RowDefinition> <MenuItem Header="_Edit">
<RowDefinition Height="50*"></RowDefinition> <MenuItem Header="Copy"/>
<RowDefinition Height="50*"></RowDefinition> <MenuItem Header="Paste"/>
</Grid.RowDefinitions> </MenuItem>
<StackPanel Grid.Row="0"> </Menu>
<TextBox Text="Select Color:" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent"/> </DockPanel>
<ItemsControl ItemsSource="{Binding ColorPalette}">
<StackPanel Grid.Row="1">
<TextBox Text="Select Color:" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent"/>
<ItemsControl ItemsSource="{Binding ColorPalette}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="models:ColorPickerButton">
<Button Margin="5,0,0,5"
BorderBrush="DimGray"
BorderThickness="2"
CornerRadius="12.5"
Background="{Binding Color}"
Width="20"
Height="20"
Command="{Binding SelectColorCommand}"
CommandParameter="{Binding}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBox HorizontalAlignment="Left" TextAlignment="Left" Margin="5,5,5,0" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent">
Brush Size:
</TextBox>
<TextBox Text="{Binding BrushThickness, Mode=TwoWay}" Margin="5,0" HorizontalAlignment="Stretch" TextAlignment="Left" BorderThickness="2" Background="Transparent"></TextBox>
<Slider Margin="5, 0" Value="{Binding BrushThickness}" Maximum="50" Minimum="0.5"></Slider>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
<Canvas Grid.Column="1" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<i:Interaction.Behaviors>
<behaviors:EventTriggerBehavior EventName="PointerPressed">
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerPressedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
<behaviors:EventTriggerBehavior EventName="PointerMoved">
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerMovedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
<behaviors:EventTriggerBehavior EventName="PointerReleased">
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerReleasedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
</i:Interaction.Behaviors>
<ItemsControl ItemsSource="{Binding DrawingPoints}">
<ItemsControl.ItemsPanel> <ItemsControl.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" /> <Panel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="{Binding WindowWidth}" MinHeight="{Binding WindowHeight}"/>
</ItemsPanelTemplate> </ItemsPanelTemplate>
</ItemsControl.ItemsPanel> </ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate> <ItemsControl.ItemTemplate>
<DataTemplate x:DataType="models:ColorPickerButton"> <DataTemplate>
<Button Margin="5,0,0,5" <Polyline Points="{Binding CurrentDrawingPoints}"
BorderBrush="DimGray" Stroke="{Binding Brush}"
BorderThickness="2" StrokeThickness="{Binding BrushThickness}"
CornerRadius="12.5" >
Background="{Binding Color}" </Polyline>
Width="20"
Height="20"
Command="{Binding SelectColorCommand}"
CommandParameter="{Binding}"
/>
</DataTemplate> </DataTemplate>
</ItemsControl.ItemTemplate> </ItemsControl.ItemTemplate>
</ItemsControl> </ItemsControl>
<TextBox HorizontalAlignment="Left" TextAlignment="Left" Margin="5,5,5,0" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent"> </Canvas>
Brush Size: </SplitView>
</TextBox> <Button Content="≡" Command="{Binding DisplaySplitEvent}" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBox Text="{Binding BrushThickness, Mode=TwoWay}" Margin="5,0" HorizontalAlignment="Stretch" TextAlignment="Left" BorderThickness="2" Background="Transparent"></TextBox> <Button.RenderTransform>
<Slider Margin="5, 0" Value="{Binding BrushThickness}" Maximum="50" Minimum="0.5"></Slider> <TranslateTransform X="{Binding ButtonOffset}" />
</StackPanel> </Button.RenderTransform>
</Grid> <Button.Transitions>
<Canvas Grid.Column="1" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> </Button.Transitions>
<i:Interaction.Behaviors> </Button>
<behaviors:EventTriggerBehavior EventName="PointerPressed"> </Panel>
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerPressedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
<behaviors:EventTriggerBehavior EventName="PointerMoved">
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerMovedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
<behaviors:EventTriggerBehavior EventName="PointerReleased">
<behaviors:InvokeCommandAction
Command="{Binding CanvasPointerReleasedCommand}"
PassEventArgsToCommand="True" />
</behaviors:EventTriggerBehavior>
</i:Interaction.Behaviors>
<ItemsControl ItemsSource="{Binding DrawingPoints}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Panel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="{Binding WindowWidth}" MinHeight="{Binding WindowHeight}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Polyline Points="{Binding CurrentDrawingPoints}"
Stroke="{Binding Brush}"
StrokeThickness="{Binding BrushThickness}"
>
</Polyline>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
</Grid>
</DockPanel>
</Window> </Window>