Skip to content

Commit 919d1df

Browse files
KebooKeboo
authored
New FlipperControl (#3431)
* Starting work on new flipper design * Sorta kinda not working * A working idea * Adding demo page app to test the Plane3d Need to figure out if we can swap the content mid flip. * Working flipper * Renamed Flipper to FlipperClassic Rename FlipperNew to Flipper * Split resource dictionaries * Adding FlipperClassic to Generic.xaml
1 parent 53bf3b4 commit 919d1df

11 files changed

+703
-296
lines changed

‎MainDemo.Wpf/Cards.xaml

+141-49
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
1616
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
1717
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
18+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.FlipperClassic.xaml" />
1819
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
1920
</ResourceDictionary.MergedDictionaries>
2021
</ResourceDictionary>
@@ -336,36 +337,36 @@
336337
</smtx:XamlDisplay>
337338

338339
<!--
339-
For the Card styled <Flipper />, bring in this resource dictionary (see top of this file)
340-
pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml
340+
For the Card styled <Flipper />, bring in this resource dictionary (see top of this file)
341+
pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml
341342
-->
342343
<StackPanel>
343344
<smtx:XamlDisplay Margin="4,4,0,0"
344345
VerticalContentAlignment="Top"
345346
UniqueKey="cards_7">
346-
<materialDesign:Flipper IsFlippedChanged="Flipper_OnIsFlippedChanged" Style="{StaticResource MaterialDesignCardFlipper}">
347-
<materialDesign:Flipper.FrontContent>
347+
<materialDesign:FlipperClassic IsFlippedChanged="Flipper_OnIsFlippedChanged" Style="{StaticResource MaterialDesignCardFlipperClassic}">
348+
<materialDesign:FlipperClassic.FrontContent>
348349
<Button Width="184"
349350
Margin="8"
350-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
351-
Content="FLIPPABLZ!"
351+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
352+
Content="FLIPPABLZ CLASSIC!"
352353
Style="{StaticResource MaterialDesignFlatButton}" />
353-
</materialDesign:Flipper.FrontContent>
354-
<materialDesign:Flipper.BackContent>
354+
</materialDesign:FlipperClassic.FrontContent>
355+
<materialDesign:FlipperClassic.BackContent>
355356
<Button Width="184"
356357
Margin="8"
357-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
358+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
358359
Content="GO BACK"
359360
Style="{StaticResource MaterialDesignFlatButton}" />
360-
</materialDesign:Flipper.BackContent>
361-
</materialDesign:Flipper>
361+
</materialDesign:FlipperClassic.BackContent>
362+
</materialDesign:FlipperClassic>
362363
</smtx:XamlDisplay>
363364

364365
<smtx:XamlDisplay Margin="4,4,0,0"
365366
VerticalContentAlignment="Top"
366367
UniqueKey="cards_8">
367-
<materialDesign:Flipper materialDesign:ElevationAssist.Elevation="Dp0" Style="{StaticResource MaterialDesignCardFlipper}">
368-
<materialDesign:Flipper.FrontContent>
368+
<materialDesign:FlipperClassic materialDesign:ElevationAssist.Elevation="Dp0" Style="{StaticResource MaterialDesignCardFlipperClassic}">
369+
<materialDesign:FlipperClassic.FrontContent>
369370
<Grid Width="200" Height="256">
370371
<Grid.RowDefinitions>
371372
<RowDefinition Height="160" />
@@ -383,13 +384,13 @@
383384
VerticalAlignment="Center">
384385
<TextBlock Text="James Willock" />
385386
<Button Margin="0,4,0,0"
386-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
387+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
387388
Content="EDIT"
388389
Style="{StaticResource MaterialDesignFlatButton}" />
389390
</StackPanel>
390391
</Grid>
391-
</materialDesign:Flipper.FrontContent>
392-
<materialDesign:Flipper.BackContent>
392+
</materialDesign:FlipperClassic.FrontContent>
393+
<materialDesign:FlipperClassic.BackContent>
393394
<Grid Width="200" Height="256">
394395
<Grid.RowDefinitions>
395396
<RowDefinition Height="Auto" />
@@ -398,7 +399,7 @@
398399
<materialDesign:ColorZone Padding="6" Mode="SecondaryMid">
399400
<StackPanel Orientation="Horizontal">
400401
<Button HorizontalAlignment="Left"
401-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
402+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
402403
Style="{StaticResource MaterialDesignToolForegroundButton}">
403404
<materialDesign:PackIcon HorizontalAlignment="Right" Kind="ArrowLeft" />
404405
</Button>
@@ -443,15 +444,106 @@
443444
</StackPanel>
444445
</Grid>
445446
</Grid>
446-
</materialDesign:Flipper.BackContent>
447-
</materialDesign:Flipper>
447+
</materialDesign:FlipperClassic.BackContent>
448+
</materialDesign:FlipperClassic>
448449
</smtx:XamlDisplay>
449450
</StackPanel>
450451

451452
<smtx:XamlDisplay Margin="4,4,0,0"
452453
VerticalContentAlignment="Top"
453454
UniqueKey="cards_9">
454-
<materialDesign:Flipper VerticalAlignment="Top" Style="{StaticResource MaterialDesignCardFlipper}">
455+
<materialDesign:FlipperClassic VerticalAlignment="Top" Style="{StaticResource MaterialDesignCardFlipperClassic}">
456+
<materialDesign:FlipperClassic.FrontContent>
457+
<Button Width="192"
458+
Margin="8"
459+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
460+
Content="RESIZING..."
461+
Style="{StaticResource MaterialDesignFlatButton}" />
462+
</materialDesign:FlipperClassic.FrontContent>
463+
<materialDesign:FlipperClassic.BackContent>
464+
<Grid Width="200" Height="256">
465+
<Grid.RowDefinitions>
466+
<RowDefinition Height="Auto" />
467+
<RowDefinition Height="*" />
468+
</Grid.RowDefinitions>
469+
<materialDesign:ColorZone Padding="6" Mode="SecondaryMid">
470+
<StackPanel Orientation="Horizontal">
471+
<Button HorizontalAlignment="Left"
472+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
473+
Style="{StaticResource MaterialDesignToolForegroundButton}">
474+
<materialDesign:PackIcon HorizontalAlignment="Right" Kind="ArrowLeft" />
475+
</Button>
476+
<TextBlock Margin="8,0,0,0"
477+
VerticalAlignment="Center"
478+
Text="EDIT USER" />
479+
</StackPanel>
480+
</materialDesign:ColorZone>
481+
482+
<Grid Grid.Row="1"
483+
Width="172"
484+
Margin="0,6,0,0"
485+
HorizontalAlignment="Center"
486+
VerticalAlignment="Top">
487+
<Grid.RowDefinitions>
488+
<RowDefinition />
489+
<RowDefinition />
490+
<RowDefinition />
491+
<RowDefinition />
492+
</Grid.RowDefinitions>
493+
<TextBox Margin="0,12,0,0"
494+
materialDesign:HintAssist.Hint="First name"
495+
materialDesign:HintAssist.IsFloating="True"
496+
Text="James" />
497+
<TextBox Grid.Row="1"
498+
Margin="0,12,0,0"
499+
materialDesign:HintAssist.Hint="Last name"
500+
materialDesign:HintAssist.IsFloating="True"
501+
Text="Willock" />
502+
<StackPanel Grid.Row="2"
503+
Margin="0,12,0,0"
504+
HorizontalAlignment="Right"
505+
Orientation="Horizontal">
506+
<TextBlock VerticalAlignment="Center" Text="Email Contact" />
507+
<ToggleButton Margin="8,0,0,0" />
508+
</StackPanel>
509+
<StackPanel Grid.Row="3"
510+
Margin="0,12,0,0"
511+
HorizontalAlignment="Right"
512+
Orientation="Horizontal">
513+
<TextBlock VerticalAlignment="Center" Text="Telephone Contact" />
514+
<ToggleButton Margin="8,0,0,0" />
515+
</StackPanel>
516+
</Grid>
517+
</Grid>
518+
</materialDesign:FlipperClassic.BackContent>
519+
</materialDesign:FlipperClassic>
520+
</smtx:XamlDisplay>
521+
522+
<smtx:XamlDisplay Margin="4,4,0,0"
523+
VerticalContentAlignment="Top"
524+
UniqueKey="flipper_2">
525+
<materialDesign:Flipper materialDesign:FlipperAssist.UniformCornerRadius="4">
526+
<materialDesign:Flipper.FrontContent>
527+
<Button Width="184"
528+
Margin="8"
529+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
530+
Content="FLIPPABLZ!"
531+
Style="{StaticResource MaterialDesignFlatButton}" />
532+
</materialDesign:Flipper.FrontContent>
533+
<materialDesign:Flipper.BackContent>
534+
<Button Width="184"
535+
Margin="8"
536+
Command="{x:Static materialDesign:Flipper.FlipCommand}"
537+
Content="GO BACK"
538+
Style="{StaticResource MaterialDesignFlatButton}" />
539+
</materialDesign:Flipper.BackContent>
540+
</materialDesign:Flipper>
541+
</smtx:XamlDisplay>
542+
543+
<smtx:XamlDisplay Margin="4,4,0,0"
544+
VerticalContentAlignment="Top"
545+
UniqueKey="flipper_1">
546+
<materialDesign:Flipper VerticalAlignment="Top">
455547
<materialDesign:Flipper.FrontContent>
456548
<Button Width="192"
457549
Margin="8"
@@ -522,71 +614,71 @@
522614
<smtx:XamlDisplay Margin="4,4,0,0"
523615
VerticalContentAlignment="Top"
524616
UniqueKey="cards_10">
525-
<materialDesign:Flipper IsFlippedChanged="Flipper_OnIsFlippedChanged">
526-
<materialDesign:Flipper.FrontContent>
617+
<materialDesign:FlipperClassic IsFlippedChanged="Flipper_OnIsFlippedChanged">
618+
<materialDesign:FlipperClassic.FrontContent>
527619
<Button Width="184"
528620
Margin="8"
529621
materialDesign:ButtonAssist.CornerRadius="8"
530-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
622+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
531623
Content="Rounded Flipper"
532624
Style="{StaticResource MaterialDesignFlatButton}" />
533-
</materialDesign:Flipper.FrontContent>
534-
<materialDesign:Flipper.BackContent>
625+
</materialDesign:FlipperClassic.FrontContent>
626+
<materialDesign:FlipperClassic.BackContent>
535627
<Button Width="184"
536628
Margin="8"
537629
materialDesign:ButtonAssist.CornerRadius="8"
538-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
630+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
539631
Content="GO BACK"
540632
Style="{StaticResource MaterialDesignFlatButton}" />
541-
</materialDesign:Flipper.BackContent>
542-
</materialDesign:Flipper>
633+
</materialDesign:FlipperClassic.BackContent>
634+
</materialDesign:FlipperClassic>
543635
</smtx:XamlDisplay>
544636

545637
<smtx:XamlDisplay Margin="4,4,0,0"
546638
VerticalContentAlignment="Top"
547639
UniqueKey="cards_11">
548-
<materialDesign:Flipper materialDesign:FlipperAssist.UniformCornerRadius="8"
549-
IsFlippedChanged="Flipper_OnIsFlippedChanged"
550-
Style="{StaticResource MaterialDesignCardFlipper}">
551-
<materialDesign:Flipper.FrontContent>
640+
<materialDesign:FlipperClassic materialDesign:FlipperAssist.UniformCornerRadius="8"
641+
IsFlippedChanged="Flipper_OnIsFlippedChanged"
642+
Style="{StaticResource MaterialDesignCardFlipperClassic}">
643+
<materialDesign:FlipperClassic.FrontContent>
552644
<Button Width="184"
553645
Margin="8"
554-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
646+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
555647
Content="Rounded Card Flipper 1"
556648
Style="{StaticResource MaterialDesignFlatButton}" />
557-
</materialDesign:Flipper.FrontContent>
558-
<materialDesign:Flipper.BackContent>
649+
</materialDesign:FlipperClassic.FrontContent>
650+
<materialDesign:FlipperClassic.BackContent>
559651
<Button Width="184"
560652
Margin="8"
561-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
653+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
562654
Content="GO BACK"
563655
Style="{StaticResource MaterialDesignFlatButton}" />
564-
</materialDesign:Flipper.BackContent>
565-
</materialDesign:Flipper>
656+
</materialDesign:FlipperClassic.BackContent>
657+
</materialDesign:FlipperClassic>
566658
</smtx:XamlDisplay>
567659

568660
<smtx:XamlDisplay Margin="4,4,0,0"
569661
VerticalContentAlignment="Top"
570662
UniqueKey="cards_12">
571-
<materialDesign:Flipper materialDesign:FlipperAssist.CardStyle="{StaticResource MaterialDesignOutlinedCard}"
572-
materialDesign:FlipperAssist.UniformCornerRadius="8"
573-
IsFlippedChanged="Flipper_OnIsFlippedChanged"
574-
Style="{StaticResource MaterialDesignCardFlipper}">
575-
<materialDesign:Flipper.FrontContent>
663+
<materialDesign:FlipperClassic materialDesign:FlipperAssist.CardStyle="{StaticResource MaterialDesignOutlinedCard}"
664+
materialDesign:FlipperAssist.UniformCornerRadius="8"
665+
IsFlippedChanged="Flipper_OnIsFlippedChanged"
666+
Style="{StaticResource MaterialDesignCardFlipperClassic}">
667+
<materialDesign:FlipperClassic.FrontContent>
576668
<Button Width="184"
577669
Margin="8"
578-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
670+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
579671
Content="Rounded Card Flipper 2"
580672
Style="{StaticResource MaterialDesignFlatButton}" />
581-
</materialDesign:Flipper.FrontContent>
582-
<materialDesign:Flipper.BackContent>
673+
</materialDesign:FlipperClassic.FrontContent>
674+
<materialDesign:FlipperClassic.BackContent>
583675
<Button Width="184"
584676
Margin="8"
585-
Command="{x:Static materialDesign:Flipper.FlipCommand}"
677+
Command="{x:Static materialDesign:FlipperClassic.FlipCommand}"
586678
Content="GO BACK"
587679
Style="{StaticResource MaterialDesignFlatButton}" />
588-
</materialDesign:Flipper.BackContent>
589-
</materialDesign:Flipper>
680+
</materialDesign:FlipperClassic.BackContent>
681+
</materialDesign:FlipperClassic>
590682
</smtx:XamlDisplay>
591683
</StackPanel>
592684
</WrapPanel>

‎MainDemo.Wpf/Domain/MainWindowViewModel.cs

+4-1
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,10 @@ private static IEnumerable<DemoItem> GenerateDemoItems(ISnackbarMessageQueue sna
247247
DocumentationLink.DemoPageLink<Cards>(),
248248
DocumentationLink.StyleLink("Card"),
249249
DocumentationLink.ApiLink<Card>()
250-
});
250+
})
251+
{
252+
HorizontalScrollBarVisibilityRequirement = ScrollBarVisibility.Disabled
253+
};
251254

252255
yield return new DemoItem(
253256
"Icon Pack",

‎MainDemo.Wpf/Properties/launchSettings.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"profiles": {
33
"Demo App": {
44
"commandName": "Project",
5-
"commandLineArgs": "-p Home -t Inherit -f LeftToRight"
5+
"commandLineArgs": "-p 3DTest -t Inherit -f LeftToRight"
66
}
77
}
88
}

0 commit comments

Comments
 (0)