Skip to content

Commit a0bef1a

Browse files
niels9001michael-hawker
authored andcommitted
Minor design tweaks header behaviors samples (#142)
* Design tweaks * Removing background theme brushes
1 parent d4fc9fd commit a0bef1a

12 files changed

+93
-92
lines changed

components/Behaviors/samples/AutoSelectBehaviorSample.xaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
1+
<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
55
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
66

7-
<StackPanel Padding="8"
7+
<StackPanel MaxWidth="480"
88
Spacing="8">
99
<TextBox Text="My content is not selected when loaded" />
1010
<TextBox Text="My content is selected when loaded">

components/Behaviors/samples/FocusBehaviorButtonSample.xaml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
1+
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
@@ -14,11 +14,11 @@
1414
<StackPanel Spacing="12">
1515
<Button x:Name="ButtonOne"
1616
x:Load="{x:Bind ControlLoaded, Mode=OneWay}"
17-
Content="Button One"
17+
Content="Button 1"
1818
IsEnabled="{x:Bind IsButtonEnabled, Mode=OneWay}" />
1919

2020
<Button x:Name="ButtonTwo"
21-
Content="Button Two" />
21+
Content="Button 2" />
2222
</StackPanel>
2323

2424
</Page>

components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
98
mc:Ignorable="d">
109

1110
<!-- We need to set height here to force scrolling in the sample -->
12-
<ListView Height="300">
11+
<ListView Height="300"
12+
VerticalAlignment="Top">
1313
<ListView.Header>
1414
<Grid MinHeight="100"
15-
Background="#FF0078D7">
15+
Background="{ThemeResource AccentFillColorDefaultBrush}">
1616
<interactivity:Interaction.Behaviors>
1717
<behaviors:FadeHeaderBehavior />
1818
</interactivity:Interaction.Behaviors>
1919
<TextBlock HorizontalAlignment="Center"
2020
VerticalAlignment="Center"
21-
Text="Sample Text" />
21+
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
22+
Text="Header" />
2223
</Grid>
2324
</ListView.Header>
2425
<ListView.ItemTemplate>
2526
<DataTemplate x:DataType="x:String">
26-
<Grid MinHeight="25"
27-
Margin="10">
27+
<Grid MinHeight="25">
2828
<TextBlock VerticalAlignment="Center"
2929
Text="{Binding}" />
3030
</Grid>

components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,27 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
98
mc:Ignorable="d">
109

1110
<!-- We need to set height here to force scrolling in the sample -->
12-
<GridView Height="300">
11+
<GridView Height="300"
12+
VerticalAlignment="Top">
1313
<GridView.Header>
1414
<Grid MinHeight="100"
15-
Background="#FF0078D7">
15+
Background="{ThemeResource AccentFillColorDefaultBrush}">
1616
<interactivity:Interaction.Behaviors>
1717
<behaviors:QuickReturnHeaderBehavior />
1818
</interactivity:Interaction.Behaviors>
1919
<TextBlock HorizontalAlignment="Center"
2020
VerticalAlignment="Center"
21-
Text="Sample Text" />
21+
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
22+
Text="Header" />
2223
</Grid>
2324
</GridView.Header>
2425
<GridView.ItemTemplate>
2526
<DataTemplate x:DataType="x:String">
2627
<Border Width="200"
27-
Height="200"
28-
Margin="10">
28+
Height="200">
2929
<TextBlock HorizontalAlignment="Center"
3030
VerticalAlignment="Center"
3131
Text="{Binding}" />

components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
98
mc:Ignorable="d">
109

1110
<!-- We need to set height here to force scrolling in the sample -->
12-
<ScrollViewer Height="300">
11+
<ScrollViewer Height="300"
12+
VerticalAlignment="Top">
1313
<StackPanel MaxWidth="480">
14-
<Image Width="100"
15-
Height="100"
16-
HorizontalAlignment="Center"
17-
Source="ms-appx:///Assets/ToolkitIcon.png">
14+
<Grid Height="100"
15+
Padding="12"
16+
Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}">
17+
<Image Source="ms-appx:///Assets/ToolkitIcon.png" />
1818
<interactivity:Interaction.Behaviors>
1919
<behaviors:QuickReturnHeaderBehavior />
2020
</interactivity:Interaction.Behaviors>
21-
</Image>
21+
</Grid>
2222
<TextBlock HorizontalAlignment="Center"
2323
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Quis vel eros donec ac odio. Nisi porta lorem mollis aliquam ut. At varius vel pharetra vel turpis nunc. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Est pellentesque elit ullamcorper dignissim cras tincidunt. Amet consectetur adipiscing elit pellentesque habitant. Purus sit amet luctus venenatis lectus magna. Amet consectetur adipiscing elit ut aliquam purus. Felis eget nunc lobortis mattis aliquam faucibus purus in. Mattis rhoncus urna neque viverra justo nec ultrices. Ipsum nunc aliquet bibendum enim facilisis gravida. Nisi est sit amet facilisis magna. Suspendisse interdum consectetur libero id faucibus nisl. Malesuada bibendum arcu vitae elementum curabitur. Molestie ac feugiat sed lectus vestibulum mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Quis enim lobortis scelerisque fermentum dui faucibus in. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Leo duis ut diam quam nulla porttitor massa. Metus aliquam eleifend mi in. Fringilla urna porttitor rhoncus dolor. Sapien eget mi proin sed. A cras semper auctor neque. Id faucibus nisl tincidunt eget nullam non nisi. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Urna id volutpat lacus laoreet non. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Arcu non odio euismod lacinia at quis risus sed. In massa tempor nec feugiat. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Iaculis nunc sed augue lacus viverra vitae. Rhoncus est pellentesque elit ullamcorper dignissim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Tempor nec feugiat nisl pretium fusce id velit ut. Eget arcu dictum varius duis at consectetur lorem donec massa. A lacus vestibulum sed arcu non odio. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Rhoncus dolor purus non enim praesent elementum facilisis leo. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Augue interdum velit euismod in pellentesque massa. Ullamcorper a lacus vestibulum sed. Penatibus et magnis dis parturient montes nascetur ridiculus. At risus viverra adipiscing at. Felis eget velit aliquet sagittis id. Venenatis tellus in metus vulputate eu. In hac habitasse platea dictumst vestibulum rhoncus. Luctus accumsan tortor posuere ac. Ullamcorper morbi tincidunt ornare massa. Tellus orci ac auctor augue mauris augue neque. Venenatis lectus magna fringilla urna porttitor. Pretium vulputate sapien nec sagittis aliquam malesuada. Aliquet nec ullamcorper sit amet. Consequat id porta nibh venenatis cras. Elementum nisi quis eleifend quam adipiscing. Netus et malesuada fames ac turpis egestas maecenas. Pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed viverra tellus in. Fusce ut placerat orci nulla pellentesque. Maecenas sed enim ut sem. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Proin fermentum leo vel orci porta non pulvinar neque. Eu non diam phasellus vestibulum lorem sed risus. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Arcu cursus vitae congue mauris. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Faucibus turpis in eu mi bibendum. Faucibus nisl tincidunt eget nullam non nisi est sit. Turpis tincidunt id aliquet risus feugiat. Nulla at volutpat diam ut venenatis tellus in metus. Ultrices neque ornare aenean euismod. Suspendisse faucibus interdum posuere lorem ipsum dolor. Nisl rhoncus mattis rhoncus urna. Vitae semper quis lectus nulla at volutpat diam. Eu lobortis elementum nibh tellus molestie nunc. Nulla facilisi morbi tempus iaculis urna. Tortor at risus viverra adipiscing at in tellus integer. Nibh tortor id aliquet lectus proin nibh nisl. Feugiat vivamus at augue eget arcu dictum. Lectus proin nibh nisl condimentum. Tristique senectus et netus et malesuada fames. Elementum nibh tellus molestie nunc non blandit massa enim. Risus ultricies tristique nulla aliquet enim. Vel pretium lectus quam id leo in vitae turpis."
2424
TextWrapping="WrapWholeWords" />

components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderBehaviorSample"
1+
<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderBehaviorSample"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
@@ -8,21 +8,22 @@
88
xmlns:local="using:BehaviorsExperiment.Samples"
99
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1010
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
11-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
1211
mc:Ignorable="d">
1312

1413
<!-- We need to set height here to force scrolling in the sample -->
1514
<controls:HeaderedTreeView Height="300"
15+
VerticalAlignment="Top"
1616
ItemsSource="{x:Bind Items, Mode=OneWay}">
1717
<controls:HeaderedTreeView.Header>
1818
<Grid MinHeight="100"
19-
Background="#FF0078D7">
19+
Background="{ThemeResource AccentFillColorDefaultBrush}">
2020
<interactivity:Interaction.Behaviors>
2121
<behaviors:StickyHeaderBehavior />
2222
</interactivity:Interaction.Behaviors>
2323
<TextBlock HorizontalAlignment="Center"
2424
VerticalAlignment="Center"
25-
Text="Sample Text" />
25+
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
26+
Text="Header" />
2627
</Grid>
2728
</controls:HeaderedTreeView.Header>
2829
<controls:HeaderedTreeView.ItemTemplate>

components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ public StickyHeaderBehaviorSample()
2020
Items = GetData();
2121
}
2222

23-
2423
private ObservableCollection<ExplorerItem> GetData()
2524
{
2625
var list = new ObservableCollection<ExplorerItem>();

components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,22 @@
88
xmlns:local="using:BehaviorsExperiment.Samples"
99
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1010
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
11-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
1211
mc:Ignorable="d">
1312

1413
<!-- We need to set height here to force scrolling in the sample -->
15-
<ScrollViewer Height="300">
14+
<ScrollViewer Height="300"
15+
VerticalAlignment="Top">
1616
<controls:HeaderedItemsControl>
1717
<controls:HeaderedItemsControl.Header>
1818
<Grid MinHeight="100"
19-
Background="#FF0078D7">
19+
Background="{ThemeResource AccentFillColorDefaultBrush}">
2020
<interactivity:Interaction.Behaviors>
2121
<behaviors:StickyHeaderBehavior />
2222
</interactivity:Interaction.Behaviors>
2323
<TextBlock HorizontalAlignment="Center"
2424
VerticalAlignment="Center"
25-
Text="Sample Text" />
25+
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
26+
Text="Header" />
2627
</Grid>
2728
</controls:HeaderedItemsControl.Header>
2829
<controls:HeaderedItemsControl.ItemTemplate>

components/Behaviors/samples/InvokeActionsSample.xaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1212
mc:Ignorable="d">
1313

14-
<Button Width="200"
15-
Height="200"
14+
<Button Width="140"
15+
Height="140"
1616
HorizontalAlignment="Center"
1717
VerticalAlignment="Center">
1818
<ani:Explicit.Animations>

components/Behaviors/samples/KeyDownTriggerBehaviorSample.xaml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
66
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
77

8-
<StackPanel Padding="12"
8+
<StackPanel MaxWidth="480"
99
Spacing="8">
1010
<TextBox PlaceholderText="Set the focus to this TextBox and press enter">
1111
<interactivity:Interaction.Behaviors>
@@ -18,7 +18,8 @@
1818

1919
<TextBlock>
2020
<Run Text="Enter pressed" />
21-
<Run Text="{x:Bind Count, Mode=OneWay}" />
21+
<Run FontWeight="SemiBold"
22+
Text="{x:Bind Count, Mode=OneWay}" />
2223
<Run Text="times." />
2324
</TextBlock>
2425
</StackPanel>

0 commit comments

Comments
 (0)