Skip to content

New FlipperControl #3431

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

Merged
Keboo merged 9 commits into from
Jan 7, 2024
Merged

New FlipperControl #3431

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b6a0dc8
Starting work on new flipper design
Keboo Dec 14, 2023
0c713ca
Sorta kinda not working
Keboo Dec 14, 2023
d6f0b04
A working idea
Keboo Dec 21, 2023
1384b19
Adding demo page app to test the Plane3d
Keboo Dec 21, 2023
b74cbce
Working flipper
Keboo Jan 4, 2024
dd2957b
Renamed Flipper to FlipperClassic
Keboo Jan 4, 2024
2806f40
Split resource dictionaries
Keboo Jan 4, 2024
847bb09
Adding FlipperClassic to Generic.xaml
Keboo Jan 4, 2024
aa59588
UI test fixes
Keboo Jan 7, 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
Prev Previous commit
Next Next commit
Adding demo page app to test the Plane3d 
Need to figure out if we can swap the content mid flip.
  • Loading branch information
@Keboo
Keboo committed Jan 4, 2024
commit 1384b19b47b54798cc4319c25ceb01f7a4b849e1
96 changes: 96 additions & 0 deletions MainDemo.Wpf/3DTest.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<UserControl x:Class="MaterialDesignDemo._3DTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MaterialDesignDemo"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<StackPanel Orientation="Horizontal">
<materialDesign:Card x:Name="FlipperContent" VerticalAlignment="Center">
<materialDesign:Card.RenderTransform>
<TranslateTransform X="-1000000" />
</materialDesign:Card.RenderTransform>
<Grid Width="200" Height="256">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<materialDesign:ColorZone Padding="6" Mode="SecondaryMid">
<StackPanel Orientation="Horizontal">
<Button HorizontalAlignment="Left"
Command="{x:Static materialDesign:FlipperNew.FlipCommand}"
Style="{StaticResource MaterialDesignToolForegroundButton}">
<materialDesign:PackIcon HorizontalAlignment="Right" Kind="ArrowLeft" />
</Button>
<TextBlock Margin="8,0,0,0"
VerticalAlignment="Center"
Text="EDIT USER" />
</StackPanel>
</materialDesign:ColorZone>

<Grid Grid.Row="1"
Width="172"
Margin="0,6,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Margin="0,12,0,0"
materialDesign:HintAssist.Hint="First name"
materialDesign:HintAssist.IsFloating="True"
Text="James" />
<TextBox Grid.Row="1"
Margin="0,12,0,0"
materialDesign:HintAssist.Hint="Last name"
materialDesign:HintAssist.IsFloating="True"
Text="Willock" />
<StackPanel Grid.Row="2"
Margin="0,12,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="Email Contact" />
<ToggleButton Margin="8,0,0,0" />
</StackPanel>
<StackPanel Grid.Row="3"
Margin="0,12,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="Telephone Contact" />
<ToggleButton Margin="8,0,0,0" />
</StackPanel>
</Grid>
</Grid>
</materialDesign:Card>

<Rectangle Margin="50,0" />

<materialDesign:Plane3DNew x:Name="PART_Plane3D"
Width="{Binding ActualWidth, ElementName=FlipperContent}"
Height="{Binding ActualHeight, ElementName=FlipperContent}"
IsHitTestVisible="False"
RotationY="{Binding Value, ElementName=RotationYSlider}"
StartingContent="{Binding ElementName=FlipperContent}"
ZFactor="2.055" />

</StackPanel>

<StackPanel Grid.Column="1" VerticalAlignment="Center">
<Slider x:Name="RotationYSlider"
Maximum="90"
Minimum="-90" />
</StackPanel>
</Grid>
</UserControl>
27 changes: 27 additions & 0 deletions MainDemo.Wpf/3DTest.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MaterialDesignDemo;

/// <summary>
/// Interaction logic for _3DTest.xaml
/// </summary>
public partial class _3DTest : UserControl
{
public _3DTest()
{
InitializeComponent();
}
}
5 changes: 5 additions & 0 deletions MainDemo.Wpf/Domain/MainWindowViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
if (snackbarMessageQueue is null)
throw new ArgumentNullException(nameof(snackbarMessageQueue));

yield return new DemoItem(
"3D Test",
typeof(_3DTest),
Array.Empty<DocumentationLink>());

yield return new DemoItem(
"Palette",
typeof(PaletteSelector),
Expand Down
2 changes: 1 addition & 1 deletion MainDemo.Wpf/Properties/launchSettings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"profiles": {
"Demo App": {
"commandName": "Project",
"commandLineArgs": "-p Cards -t Inherit -f LeftToRight"
"commandLineArgs": "-p 3DTest -t Inherit -f LeftToRight"
}
}
}
28 changes: 14 additions & 14 deletions MaterialDesignThemes.Wpf/Plane3DNew.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using System.Windows.Data;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Media.Media3D;
using System.Windows.Shapes;
Expand Down Expand Up @@ -32,15 +32,15 @@ public class Plane3DNew : ContentControl



public static readonly DependencyProperty EndingContentProperty =
DependencyProperty.Register("EndingContent", typeof(FrameworkElement), typeof(Plane3DNew),
new PropertyMetadata(null, (d, args) => ((Plane3DNew)d).SetupVisualElements()));
//public static readonly DependencyProperty EndingContentProperty =
// DependencyProperty.Register("EndingContent", typeof(FrameworkElement), typeof(Plane3DNew),
// new PropertyMetadata(null, (d, args) => ((Plane3DNew)d).SetupVisualElements()));

public FrameworkElement? EndingContent
{
get => (FrameworkElement?)GetValue(EndingContentProperty);
set => SetValue(EndingContentProperty, value);
}
//public FrameworkElement? EndingContent
//{
// get => (FrameworkElement?)GetValue(EndingContentProperty);
// set => SetValue(EndingContentProperty, value);
//}

public static readonly DependencyProperty StartingContentProperty =
DependencyProperty.Register("StartingContent", typeof(FrameworkElement), typeof(Plane3DNew),
Expand Down Expand Up @@ -171,8 +171,7 @@ protected override Size ArrangeOverride(Size finalSize)

private void SetupVisualElements()
{
if (StartingContent is { } startingContent &&
EndingContent is { } endingContent)
if (StartingContent is { } startingContent)
{
var simpleQuad = new MeshGeometry3D
{
Expand All @@ -186,7 +185,7 @@ private void SetupVisualElements()
frontMaterial.SetValue(Viewport2DVisual3D.IsVisualHostMaterialProperty, true);

//Ending item?
var vb = new VisualBrush(endingContent)
var vb = new VisualBrush()
{
Stretch = Stretch.None
};
Expand Down Expand Up @@ -287,11 +286,12 @@ private void UpdateRotation()

private void Update3D()
{
if (_viewport3D is { } viewport)
if (_viewport3D is { } viewport &&
StartingContent is { } content)
{
// Use GetDescendantBounds for sizing and centering since DesiredSize includes layout whitespace, whereas GetDescendantBounds
// is tighter
var logicalBounds = VisualTreeHelper.GetDescendantBounds(StartingContent);
var logicalBounds = VisualTreeHelper.GetDescendantBounds(content);
var w = logicalBounds.Width;
var h = logicalBounds.Height;

Expand Down
19 changes: 14 additions & 5 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Flipper.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,14 +255,18 @@
<VisualStateGroup.Transitions>
<VisualTransition From="Unflipped" To="Flipped">
<Storyboard FillBehavior="HoldEnd">
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="StartingContent">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="StartingContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding ElementName=PART_FrontContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{Binding ElementName=PART_BackContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Null}" />
</ObjectAnimationUsingKeyFrames>

<!--
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="EndingContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding ElementName=PART_BackContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Null}" />
</ObjectAnimationUsingKeyFrames>-->
</ObjectAnimationUsingKeyFrames>
-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Collapsed}" />
Expand All @@ -283,12 +287,13 @@
KeyTime="0:0:0.4"
Value="0" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackContentTransform" Storyboard.TargetProperty="X">
<DiscreteDoubleKeyFrame KeyTime="0:0:0.0" Value="-1000000" />
<DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_BackContent" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FrontContentTransform" Storyboard.TargetProperty="X">
Expand All @@ -297,12 +302,17 @@
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FrontContent" Storyboard.TargetProperty="Visibility">
<!--<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Hidden}" />-->
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Static Visibility.Collapsed}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Flipped" To="Unflipped">
<Storyboard FillBehavior="HoldEnd">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="StartingContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding ElementName=PART_BackContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.2" Value="{Binding ElementName=PART_FrontContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Null}" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Plane3D" Storyboard.TargetProperty="StartingContent">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{Binding ElementName=PART_BackContent}" />
<DiscreteObjectKeyFrame KeyTime="0:0:0.4" Value="{x:Null}" />
Expand Down Expand Up @@ -408,7 +418,6 @@
RotationY="0"
IsHitTestVisible="False"
StartingContent="{Binding ElementName=PART_FrontContent}"
EndingContent="{Binding ElementName=PART_BackContent}"
Visibility="Collapsed"
ZFactor="2.055" />
</Grid>
Expand Down