Skip to content
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

Jump to bottom

Minor sample tweaks #209

Merged
merged 6 commits into from Sep 1, 2023
Merged

Minor sample tweaks #209

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2a64053
Removing/improving XAML snippets for ConnectedAnimations
niels9001 Sep 1, 2023
0413a60
Removing old icon reference from FontIconExtension snippet
niels9001 Sep 1, 2023
4bffc6e
Use FontIconExtension on Segmented samples
niels9001 Sep 1, 2023
35da314
Use FontIconExtension on ConnectedAnimation sample
niels9001 Sep 1, 2023
85bb5db
Add missing using
niels9001 Sep 1, 2023
b1da481
Update components/Animations/samples/Animations.Samples.csproj
niels9001 Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions components/Animations/samples/Animations.Samples.csproj
View file
Open in desktop
Expand Up @@ -5,6 +5,11 @@

<!-- Sets this up as a toolkit component's sample project -->
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />

<ItemGroup>
<ProjectReference Include="..\..\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj"/>
niels9001 marked this conversation as resolved.
Show resolved Hide resolved
</ItemGroup>

<ItemGroup>
<None Remove="Assets\BigFourSummerHeat2.jpg" />
<None Remove="Assets\BisonBadlandsChillin2.jpg" />
Expand Down
41 changes: 12 additions & 29 deletions components/Animations/samples/ConnectedAnimations.md
View file
Open in desktop
Expand Up @@ -12,9 +12,6 @@ issue-id: 0
icon: Assets/ConnectedAnimations.png
---


# Connected Animations XAML Attached Properties

[Connected animations](/windows/uwp/style/connected-animation) let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.

The Connected Animations XAML Attached Properties enable connected animations to be defined directly in your XAML code by simply adding a Key to the element that should animate. There are also attached properties to enable coordinated animations and animations in lists and grids.
Expand All @@ -27,15 +24,15 @@ The Connected Animations XAML Attached Properties enable connected animations to
<Page ...
xmlns:animations="using:CommunityToolkit.WinUI.Animations">

<Border x:Name="Element" animations:Connected.Key="item"></Border>
<Border x:Name="Element" animations:Connected.Key="item"/>

<TextBlock animations:Connected.AnchorElement="{x:Bind Element}" Text="Hello World"/>

<GridView animations:Connected.ListItemElementName="ItemThumbnail"
animations:Connected.ListItemKey="listItem">
<GridView.ItemTemplate>
<DataTemplate>
<Image x:Name="ItemThumbnail" Height="200" Width="200"></Image>
<Image x:Name="ItemThumbnail" Height="200" Width="200"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Expand Down Expand Up @@ -100,24 +97,13 @@ In those cases, you can use the **SetListDataItemForNextConnectedAnnimation** ex
Frame.Navigate(typeof(DetailsPage), dataItemToAnimate.Id);
```

```vb
' dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
Frame.Navigate(GetType(DetailsPage), dataItemToAnimate.Id)
```

This method is also helpful when navigating back to an item different from the item it was navigated from.

```csharp
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
Frame.GoBack();
```

```vb
Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
Frame.GoBack()
```

## Examples

We can create the above connected animations.
Expand All @@ -128,8 +114,7 @@ We need a set a key for the element to be connected with another element in a di

```xaml
<Grid>
<Border Height="100" Width="100" Background="Purple"
VerticalAlignment="Center" HorizontalAlignment="Center"
<Border Height="100" Width="100" Background="Purple" VerticalAlignment="Center" HorizontalAlignment="Center"
animations:Connected.Key="item" />
</Grid>
```
Expand All @@ -140,14 +125,13 @@ We need to set the same key for the element to be connected with. Also, You can

```xaml
<StackPanel Orientation="Horizontal">
<Border x:Name="HeroElement" Height="300" Width="300" Background="Purple"
<Border x:Name="HeroElement" Height="300" Width="300" Background="Purple"
animations:Connected.Key="item"/>

<StackPanel x:Name="HeroDetailsElement" Margin="20,0"
VerticalAlignment="Bottom" MaxWidth="500"
<StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500"
animations:Connected.AnchorElement="{x:Bind HeroElement}">
<TextBlock Text="Header" FontSize="50">Header</TextBlock>
<TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
<TextBlock Text="Header" FontSize="50" Text="Header"/>
<TextBlock TextWrapping="WrapWholeWords" Text="Lorem ipsum ..."/>
</StackPanel>
</StackPanel>
```
Expand All @@ -162,8 +146,8 @@ animations:Connected.ListItemKey="listItem">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Item">
<StackPanel>
<Border x:Name="ItemThumbnail" Background="Purple" Height="200" Width="200"></Border>
<TextBlock Text="{x:Bind Title}"></TextBlock>
<Border x:Name="ItemThumbnail" Background="Purple" Height="200" Width="200"/>
<TextBlock Text="{x:Bind Title}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
Expand All @@ -179,16 +163,15 @@ In this page, you just need to give the same key.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel x:Name="HeroDetailsElement" Margin="20,0" VerticalAlignment="Bottom" MaxWidth="500"
animations:Connected.AnchorElement="{x:Bind ItemHeroElement}">
<TextBlock Text="{x:Bind item.Title}"
FontSize="50"/>
<TextBlock TextWrapping="WrapWholeWords">Lorem ipsum ...</TextBlock>
<TextBlock Text="{x:Bind item.Title}" FontSize="50"/>
<TextBlock TextWrapping="WrapWholeWords" Text="Lorem ipsum..."/>
</StackPanel>

<Border x:Name="ItemHeroElement" Height="300" Width="300" Background="Purple"
animations:Connected.Key="listItem"/>
</StackPanel>

<TextBlock Margin="0,40" TextWrapping="WrapWholeWords">Lorem Ipsum ...</TextBlock>
<TextBlock Margin="0,40" TextWrapping="WrapWholeWords" Text="Lorem ipsum..."/>
</StackPanel>
```

9 changes: 4 additions & 5 deletions components/Animations/samples/ConnectedAnimationsSample.xaml
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:AnimationsExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="CommunityToolkit.WinUI"
xmlns:ui="using:CommunityToolkit.WinUI"
mc:Ignorable="d">
<Grid>
<Border Background="{ThemeResource SolidBackgroundFillColorBaseBrush}"
Expand All @@ -24,10 +24,9 @@
Orientation="Horizontal">
<Button x:Name="BackButton"
Click="BackButton_Click"
Visibility="Collapsed">
<FontIcon FontSize="14"
Glyph="&#xE72B;" />
</Button>
Content="{ui:FontIcon Glyph=&#xE72B;,
FontSize=14}"
Visibility="Collapsed" />
<TextBlock Margin="12,0"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Expand Down
2 changes: 1 addition & 1 deletion components/Extensions/samples/IconMarkupExtensions.md
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@ The `FontIconExtension` type provides the ability to create `FontIcon` instances
<!--Before-->
<AppBarButton>
<AppBarButton.Icon>
<FontIcon Glyph="&#xE102;" FontFamily="Segoe MDL2 Assets"/>
<FontIcon Glyph="&#xE102;" FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
</AppBarButton.Icon>
</AppBarButton>

Expand Down
3 changes: 3 additions & 0 deletions components/Segmented/samples/Segmented.Samples.csproj
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@

<!-- Sets this up as a toolkit component's sample project -->
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
<ItemGroup>
<ProjectReference Include="..\..\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj"/>
</ItemGroup>
<ItemGroup>
<None Remove="Assets\Segmented.png" />
</ItemGroup>
Expand Down
2 changes: 1 addition & 1 deletion components/Segmented/samples/Segmented.md
View file
Open in desktop
Expand Up @@ -23,6 +23,6 @@ The `Segmented` control is best used with 2-5 items and does not support overflo

## Other styles

The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PivotSegmentedStyle` matches a modern `Pivot` style while the `ButtonSegmentedStyle` represents buttons.
The `Segmented` control contains various additional styles, to match the look and feel of your application. The `PivotSegmentedStyle` matches a modern `Pivot` style while the `ButtonSegmentedStyle` represents buttons. To load these styles, make sure to add the `ResourceDictionary` as a resource (see `Page.Resources` sample below).

> [!SAMPLE SegmentedStylesSample]
52 changes: 16 additions & 36 deletions components/Segmented/samples/SegmentedBasicSample.xaml
View file
Open in desktop
@@ -1,11 +1,12 @@
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="SegmentedExperiment.Samples.SegmentedBasicSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:SegmentedExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="using:CommunityToolkit.WinUI"
mc:Ignorable="d">

<StackPanel x:Name="Panel"
Expand All @@ -15,26 +16,14 @@
<controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
SelectedIndex="0"
SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
<controls:SegmentedItem Content="Item 1">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xEA3A;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem Content="Item 2">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xEA3A;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem Content="Item 3 with a long label">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xEA3A;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem Content="Item 4">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xEA3A;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem Content="Item 1"
Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
<controls:SegmentedItem Content="Item 2"
Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
<controls:SegmentedItem Content="Item 3 with a long label"
Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
<controls:SegmentedItem Content="Item 4"
Icon="{ui:FontIcon Glyph=&#xEA3A;}" />
</controls:Segmented>

<TextBlock Margin="0,24,0,0"
Expand All @@ -43,21 +32,12 @@
<controls:Segmented HorizontalAlignment="{x:Bind local:SegmentedBasicSample.ConvertStringToHorizontalAlignment(Alignment), Mode=OneWay}"
SelectedIndex="2"
SelectionMode="{x:Bind local:SegmentedBasicSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}">
<controls:SegmentedItem ToolTipService.ToolTip="Day view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE8BF;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem ToolTipService.ToolTip="Week view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE8C0;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem ToolTipService.ToolTip="Month view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE787;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
<controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE8BF;}"
ToolTipService.ToolTip="Day view" />
<controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE8C0;}"
ToolTipService.ToolTip="Week view" />
<controls:SegmentedItem Icon="{ui:FontIcon Glyph=&#xE787;}"
ToolTipService.ToolTip="Month view" />
</controls:Segmented>
</StackPanel>
</Page>
24 changes: 8 additions & 16 deletions components/Segmented/samples/SegmentedStylesSample.xaml
View file
Open in desktop
@@ -1,11 +1,12 @@
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="SegmentedExperiment.Samples.SegmentedStylesSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:SegmentedExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="using:CommunityToolkit.WinUI"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
Expand Down Expand Up @@ -34,23 +35,14 @@
SelectionMode="{x:Bind local:SegmentedStylesSample.ConvertStringToSelectionMode(SelectionMode), Mode=OneWay}"
Style="{StaticResource ButtonSegmentedStyle}">
<controls:SegmentedItem Content="Day"
ToolTipService.ToolTip="Day view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE8BF;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
Icon="{ui:FontIcon Glyph=&#xE8BF;}"
ToolTipService.ToolTip="Day view" />
<controls:SegmentedItem Content="Week"
ToolTipService.ToolTip="Week view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE8C0;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
Icon="{ui:FontIcon Glyph=&#xE8C0;}"
ToolTipService.ToolTip="Week view" />
<controls:SegmentedItem Content="Month"
ToolTipService.ToolTip="Month view">
<controls:SegmentedItem.Icon>
<FontIcon Glyph="&#xE787;" />
</controls:SegmentedItem.Icon>
</controls:SegmentedItem>
Icon="{ui:FontIcon Glyph=&#xE787;}"
ToolTipService.ToolTip="Month view" />
</controls:Segmented>
</StackPanel>
</Page>