Skip to content

Commit 4ca90c3

Browse files
committed
Add DiffView and ExpandingCards Samples
1 parent 1b5614e commit 4ca90c3

5 files changed

Lines changed: 219 additions & 0 deletions

File tree

‎dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,20 @@
208208
"ImagePath": "ms-appx:///Assets/Fluent/RatingControl.png",
209209
"IsSpecialSection": false,
210210
"Items": [
211+
{
212+
"UniqueId": "DevWinUIGallery.Views.ExpandingCardsPage",
213+
"Title": "Expanding Cards",
214+
"Subtitle": "A row of image cards where the hovered, focused or selected card smoothly expands and the others collapse",
215+
"IsNew": true,
216+
"ImagePath": "ms-appx:///Assets/Fluent/FlipView.png"
217+
},
218+
{
219+
"UniqueId": "DevWinUIGallery.Views.DiffViewPage",
220+
"Title": "Diff View",
221+
"Subtitle": "A virtualized text diff viewer with unified and split modes, intra-line highlights, collapsible context and text selection",
222+
"IsNew": true,
223+
"ImagePath": "ms-appx:///Assets/Fluent/ListView.png"
224+
},
211225
{
212226
"UniqueId": "DevWinUIGallery.Views.HoldToConfirmPage",
213227
"Title": "Hold To Confirm",
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<Page x:Class="DevWinUIGallery.Views.DiffViewPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:dev="using:DevWinUI"
7+
xmlns:local="using:DevWinUIGallery"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<ScrollViewer>
12+
<StackPanel Margin="10" dev:PanelAttach.ChildrenTransitions="Default" Spacing="10">
13+
<local:ControlExample DocPage="controls/diffView" HeaderText="DiffView">
14+
<local:ControlExample.Xaml>
15+
<x:String>
16+
&lt;dev:DiffView Filename="OrderService.cs" OldText="{x:Bind OldSample}" NewText="{x:Bind NewSample}" /&gt;
17+
</x:String>
18+
</local:ControlExample.Xaml>
19+
<local:ControlExample.Pane>
20+
<StackPanel Spacing="10">
21+
<TextBox x:Name="TxtFilename" Header="Filename" Text="OrderService.cs" />
22+
<ComboBox x:Name="CmbViewMode" Header="View Mode" ItemsSource="{x:Bind ViewModeItems, Mode=OneWay}" SelectedIndex="0" />
23+
<ComboBox x:Name="CmbUnifiedMode" Header="Unified Mode" ItemsSource="{x:Bind UnifiedModeItems, Mode=OneWay}" SelectedIndex="0" />
24+
<Slider x:Name="SliderContext" Header="Context Lines" Maximum="10" Minimum="0" Value="3" />
25+
<Slider x:Name="SliderMaxHeight" Header="Max Body Height" Maximum="800" Minimum="150" StepFrequency="10" Value="480" />
26+
<ToggleSwitch x:Name="TglHeader" Header="Show Header" IsOn="True" />
27+
<ToggleSwitch x:Name="TglLineNumbers" Header="Show Line Numbers" IsOn="True" />
28+
<ToggleSwitch x:Name="TglCollapse" Header="Collapse Unchanged" IsOn="True" />
29+
<ToggleSwitch x:Name="TglWrap" Header="Wrap Lines" IsOn="False" />
30+
<ToggleSwitch x:Name="TglHighlight" Header="Highlight Changes" IsOn="True" />
31+
<ToggleSwitch x:Name="TglSwitcher" Header="Show Mode Switcher" IsOn="True" />
32+
<ToggleSwitch x:Name="TglAnimated" Header="Is Animated" IsOn="True" />
33+
<ToggleSwitch x:Name="TglSingleLine" Header="Use Single Line Selection" IsOn="False" />
34+
<Button Click="ReplayButton_Click" Content="Replay" />
35+
</StackPanel>
36+
</local:ControlExample.Pane>
37+
<dev:DiffView x:Name="Sample" AddedLineFormat="Added: {0}" AfterText="After" ApproximateText="Approximate diff" BeforeText="Before" CollapseUnchanged="{x:Bind TglCollapse.IsOn, Mode=OneWay}" ContextLines="{x:Bind ToInt(SliderContext.Value), Mode=OneWay}" CopyText="Copy" ExpandAutomationFormat="Expand {0} unchanged lines" ExpanderFormat="Show {0} unchanged lines" FileAutomationFormat="Diff of {0}" Filename="{x:Bind TxtFilename.Text, Mode=OneWay}" HighlightChanges="{x:Bind TglHighlight.IsOn, Mode=OneWay}" InlineText="Inline" IsAnimated="{x:Bind TglAnimated.IsOn, Mode=OneWay}" MaxBodyHeight="{x:Bind SliderMaxHeight.Value, Mode=OneWay}" NewText="{x:Bind NewSample}" OldText="{x:Bind OldSample}" RemovedLineFormat="Removed: {0}" SelectAllText="Select all" ShowHeader="{x:Bind TglHeader.IsOn, Mode=OneWay}" ShowLineNumbers="{x:Bind TglLineNumbers.IsOn, Mode=OneWay}" ShowModeSwitcher="{x:Bind TglSwitcher.IsOn, Mode=OneWay}" SummaryAutomationFormat="{}{0} additions, {1} removals" UnifiedMode="{x:Bind ((dev:DiffUnifiedMode)CmbUnifiedMode.SelectedItem), Mode=OneWay}" UseSingleLineSelection="{x:Bind TglSingleLine.IsOn, Mode=OneWay}" ViewMode="{x:Bind ((dev:DiffViewMode)CmbViewMode.SelectedItem), Mode=OneWay}" WrapLines="{x:Bind TglWrap.IsOn, Mode=OneWay}" />
38+
</local:ControlExample>
39+
</StackPanel>
40+
</ScrollViewer>
41+
</Page>
Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
namespace DevWinUIGallery.Views;
2+
3+
public sealed partial class DiffViewPage : Page
4+
{
5+
public ObservableCollection<DiffViewMode> ViewModeItems { get; set; } = new ObservableCollection<DiffViewMode>(Enum.GetValues<DiffViewMode>());
6+
public ObservableCollection<DiffUnifiedMode> UnifiedModeItems { get; set; } = new ObservableCollection<DiffUnifiedMode>(Enum.GetValues<DiffUnifiedMode>());
7+
8+
public string OldSample { get; } = """
9+
using System;
10+
using System.Collections.Generic;
11+
using System.Linq;
12+
13+
namespace Shop.Orders;
14+
15+
public class OrderService
16+
{
17+
private readonly IOrderRepository _repository;
18+
private readonly ILogger _logger;
19+
20+
public OrderService(IOrderRepository repository, ILogger logger)
21+
{
22+
_repository = repository;
23+
_logger = logger;
24+
}
25+
26+
public decimal CalculateTotal(Order order)
27+
{
28+
decimal total = 0;
29+
foreach (var item in order.Items)
30+
{
31+
total += item.Price * item.Quantity;
32+
}
33+
return total;
34+
}
35+
36+
public IReadOnlyList<Order> GetPending()
37+
{
38+
return _repository.GetAll().Where(o => o.Status == "pending").ToList();
39+
}
40+
41+
public void Cancel(int id)
42+
{
43+
var order = _repository.Find(id);
44+
order.Status = "cancelled";
45+
_repository.Save(order);
46+
}
47+
48+
public string Describe(Order order)
49+
{
50+
return "Order " + order.Id + " has " + order.Items.Count + " items";
51+
}
52+
}
53+
""";
54+
55+
public string NewSample { get; } = """
56+
using System;
57+
using System.Collections.Generic;
58+
using System.Linq;
59+
60+
namespace Shop.Orders;
61+
62+
public class OrderService
63+
{
64+
private readonly IOrderRepository _repository;
65+
private readonly ILogger _logger;
66+
67+
public OrderService(IOrderRepository repository, ILogger logger)
68+
{
69+
_repository = repository;
70+
_logger = logger;
71+
}
72+
73+
public decimal CalculateTotal(Order order)
74+
{
75+
ArgumentNullException.ThrowIfNull(order);
76+
return order.Items.Sum(item => item.Price * item.Quantity);
77+
}
78+
79+
public IReadOnlyList<Order> GetPending()
80+
{
81+
return _repository.GetAll().Where(o => o.Status == "pending").ToList();
82+
}
83+
84+
public void Cancel(int id)
85+
{
86+
var order = _repository.Find(id) ?? throw new KeyNotFoundException($"Order {id} not found");
87+
order.Status = "cancelled";
88+
_repository.Save(order);
89+
_logger.Info($"Order {id} cancelled");
90+
}
91+
92+
public string Describe(Order order)
93+
{
94+
return $"Order {order.Id} has {order.Items.Count} items";
95+
}
96+
}
97+
""";
98+
99+
public DiffViewPage()
100+
{
101+
InitializeComponent();
102+
}
103+
104+
private static int ToInt(double value) => (int)value;
105+
106+
private void ReplayButton_Click(object sender, RoutedEventArgs e)
107+
{
108+
Sample.Replay();
109+
}
110+
}
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<Page x:Class="DevWinUIGallery.Views.ExpandingCardsPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:dev="using:DevWinUI"
7+
xmlns:local="using:DevWinUIGallery"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<ScrollViewer>
12+
<StackPanel Margin="10" dev:PanelAttach.ChildrenTransitions="Default" Spacing="10">
13+
<local:ControlExample DocPage="controls/expandingCards" HeaderText="ExpandingCards">
14+
<local:ControlExample.Xaml>
15+
<x:String>
16+
&lt;dev:ExpandingCards &gt; #nl#
17+
&lt;dev:ExpandingCardItem Title="Mountains" Source="ms-appx:///Assets/mountains.jpg" /&gt; #nl#
18+
&lt;dev:ExpandingCardItem Title="Forest" Source="ms-appx:///Assets/forest.jpg" /&gt; #nl#
19+
&lt;dev:ExpandingCardItem Title="Ocean" Source="ms-appx:///Assets/ocean.jpg" /&gt; #nl#
20+
&lt;/dev:ExpandingCards&gt;
21+
</x:String>
22+
</local:ControlExample.Xaml>
23+
<local:ControlExample.Pane>
24+
<StackPanel Spacing="10">
25+
<Slider x:Name="SliderActiveIndex" Header="Default Active Index" Maximum="3" Minimum="0" Value="0" />
26+
<Slider x:Name="SliderExpandedFlex" Header="Expanded Flex" Maximum="10" Minimum="2" StepFrequency="0.2" Value="5.4" />
27+
<Slider x:Name="SliderCollapsedFlex" Header="Collapsed Flex" Maximum="3" Minimum="0.5" StepFrequency="0.1" Value="1" />
28+
<Slider x:Name="SliderCornerRadius" Header="Card Corner Radius" Maximum="48" Minimum="0" Value="24" />
29+
<ToggleSwitch x:Name="TglReduceMotion" Header="Reduce Motion" IsOn="False" />
30+
</StackPanel>
31+
</local:ControlExample.Pane>
32+
<dev:ExpandingCards Height="360" CardCornerRadius="{x:Bind ToCornerRadius(SliderCornerRadius.Value), Mode=OneWay}" CollapsedFlex="{x:Bind SliderCollapsedFlex.Value, Mode=OneWay}" DefaultActiveIndex="{x:Bind ToInt(SliderActiveIndex.Value), Mode=OneWay}" ExpandedFlex="{x:Bind SliderExpandedFlex.Value, Mode=OneWay}" ReduceMotion="{x:Bind TglReduceMotion.IsOn, Mode=OneWay}">
33+
<dev:ExpandingCardItem Title="Mountains" Alt="Snowy mountain peaks" Source="https://picsum.photos/seed/dwu-mountains/900/700" />
34+
<dev:ExpandingCardItem Title="Forest" Alt="Dense green forest" Source="https://picsum.photos/seed/dwu-forest/900/700" />
35+
<dev:ExpandingCardItem Title="Ocean" Alt="Waves on a beach" Source="https://picsum.photos/seed/dwu-ocean/900/700" />
36+
<dev:ExpandingCardItem Title="Desert" Alt="Sand dunes at sunset" Source="https://picsum.photos/seed/dwu-desert/900/700" />
37+
</dev:ExpandingCards>
38+
</local:ControlExample>
39+
</StackPanel>
40+
</ScrollViewer>
41+
</Page>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
namespace DevWinUIGallery.Views;
2+
3+
public sealed partial class ExpandingCardsPage : Page
4+
{
5+
public ExpandingCardsPage()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
private static int ToInt(double value) => (int)value;
11+
12+
private static CornerRadius ToCornerRadius(double value) => new CornerRadius(value);
13+
}

0 commit comments

Comments
 (0)