Microsoft.Xaml.Behaviors.*
パッケージには、いくつかの便利なトリガーとアクションが含まれており、Windows Community Toolkit にはさらに多くの機能が用意されています。
KeyDownTriggerBehavior
関連付けられた UIElement のキー押下イベントをリッスンし、一連のアクションをトリガーするビヘイビアー。
<Page x:Class="BehaviorsExperiment.Samples.KeyDownTriggerBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
<StackPanel MaxWidth="480"
Spacing="8">
<TextBox PlaceholderText="Set the focus to this TextBox and press enter">
<interactivity:Interaction.Behaviors>
<behaviors:KeyDownTriggerBehavior Key="Enter">
<interactivity:CallMethodAction MethodName="IncrementCount"
TargetObject="{x:Bind}" />
</behaviors:KeyDownTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>
<TextBlock>
<Run Text="Enter pressed" />
<Run FontWeight="SemiBold"
Text="{x:Bind Count, Mode=OneWay}" />
<Run Text="times." />
</TextBlock>
</StackPanel>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSample(id: nameof(KeyDownTriggerBehaviorSample), nameof(KeyDownTriggerBehavior), description: $"A sample for showing how to use the {nameof(KeyDownTriggerBehavior)}.")]
public sealed partial class KeyDownTriggerBehaviorSample : Page, INotifyPropertyChanged
{
public KeyDownTriggerBehaviorSample()
{
this.InitializeComponent();
}
public int Count { get; set; }
public void IncrementCount()
{
Count++;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Count)));
}
public event PropertyChangedEventHandler? PropertyChanged;
}
AutoSelectBehavior
AutoSelectBehavior は、読み込まれるときに、関連付けられている TextBox のコンテンツ全体を自動的に選択します。
<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
<StackPanel MaxWidth="480"
Spacing="8">
<TextBox Text="My content is not selected when loaded" />
<TextBox Text="My content is selected when loaded">
<interactivity:Interaction.Behaviors>
<behaviors:AutoSelectBehavior />
</interactivity:Interaction.Behaviors>
</TextBox>
</StackPanel>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSample(id: nameof(AutoSelectBehaviorSample), nameof(AutoSelectBehavior), description: $"A sample for showing how to use the AutoSelectBehavior.")]
public sealed partial class AutoSelectBehaviorSample : Page
{
public AutoSelectBehaviorSample()
{
this.InitializeComponent();
}
}
ViewportBehavior
このビヘイビアーにより、要素が ScrollViewer ビューポートへ入ったり出たりするのをリッスンできます。
<Page x:Class="BehaviorsExperiment.Samples.ViewportBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
x:Name="RootElement">
<Grid RowSpacing="12">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center"
IsHitTestVisible="False"
Style="{StaticResource CaptionTextBlockStyle}"
Text="Scroll to see the effect" />
<ScrollViewer Grid.Row="1"
MaxWidth="480"
MaxHeight="480"
BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}"
BorderThickness="1">
<Grid Height="2000">
<Border Width="200"
Height="200"
Background="{ThemeResource AccentFillColorTertiaryBrush}">
<interactivity:Interaction.Behaviors>
<behaviors:ViewportBehavior x:Name="ViewportBehavior"
IsAlwaysOn="{x:Bind IsAlwaysOn, Mode=OneWay}" />
</interactivity:Interaction.Behaviors>
<Rectangle Width="100"
Height="100"
Fill="{ThemeResource AccentFillColorDefaultBrush}" />
</Border>
</Grid>
</ScrollViewer>
<StackPanel Grid.Row="2"
HorizontalAlignment="Center">
<TextBlock>
<Run Text="IsFullyInViewport:" />
<Run FontWeight="SemiBold"
Text="{x:Bind ViewportBehavior.IsFullyInViewport, Mode=OneWay}" />
</TextBlock>
<TextBlock>
<Run Text="IsInViewport:" />
<Run FontWeight="SemiBold"
Text="{x:Bind ViewportBehavior.IsInViewport, Mode=OneWay}" />
</TextBlock>
</StackPanel>
</Grid>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSampleBoolOption("IsAlwaysOn", true, Title = "IsAlwaysOn")]
[ToolkitSample(id: nameof(ViewportBehaviorSample), nameof(ViewportBehavior), description: $"A sample for showing how to use the {nameof(ViewportBehavior)}.")]
public sealed partial class ViewportBehaviorSample : Page
{
public ViewportBehaviorSample()
{
this.InitializeComponent();
}
}
FocusBehavior
このビヘイビアーは、指定されたターゲットのうち、それを受け入れる最初のコントロールにフォーカスを設定します。
コントロールは、有効になりビジュアル ツリーに読み込まれる場合にのみ、フォーカスを受け取ります。
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
<interactivity:Interaction.Behaviors>
<behaviors:FocusBehavior>
<behaviors:FocusTarget Control="{x:Bind ButtonOne}" />
<behaviors:FocusTarget Control="{x:Bind ButtonTwo}" />
</behaviors:FocusBehavior>
</interactivity:Interaction.Behaviors>
<StackPanel Spacing="12">
<Button x:Name="ButtonOne"
x:Load="{x:Bind ControlLoaded, Mode=OneWay}"
Content="Button 1"
IsEnabled="{x:Bind IsButtonEnabled, Mode=OneWay}" />
<Button x:Name="ButtonTwo"
Content="Button 2" />
</StackPanel>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSampleBoolOption("IsButtonEnabled", true, Title = "Enable button")]
[ToolkitSampleBoolOption("ControlLoaded", true, Title = "Toggle x:Bind")]
[ToolkitSample(id: nameof(FocusBehaviorButtonSample), $"{nameof(FocusBehavior)}: Disabled / Unloaded items", description: $"A sample demonstrating how {nameof(FocusBehavior)} affects disabled or unloaded controls.")]
public sealed partial class FocusBehaviorButtonSample : Page
{
public FocusBehaviorButtonSample()
{
this.InitializeComponent();
}
}
空のリストはフォーカスを受け取りません。
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorListSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
<interactivity:Interaction.Behaviors>
<behaviors:FocusBehavior>
<behaviors:FocusTarget Control="{x:Bind EmptyList}" />
<behaviors:FocusTarget Control="{x:Bind NonEmptyList}" />
</behaviors:FocusBehavior>
</interactivity:Interaction.Behaviors>
<StackPanel>
<ListView x:Name="EmptyList" />
<ListView x:Name="NonEmptyList">
<ListView.Items>
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
</ListView.Items>
</ListView>
</StackPanel>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSample(id: nameof(FocusBehaviorListSample), $"{nameof(FocusBehavior)}: Lists", description: $"A sample demonstrating how {nameof(FocusBehavior)} affects lists.")]
public sealed partial class FocusBehaviorListSample : Page
{
public FocusBehaviorListSample()
{
this.InitializeComponent();
}
}
NavigateToUriAction
このビヘイビアーにより、Hyperlink
や HyperlinkButton
と同様に、XAML で URI を定義できます。 これにより、コードビハインドで Click
イベントを接続したり、HyperlinkButton
を再スタイル化したりすることなく、Button
を使用して XAML で URI を定義できます。
<Page x:Class="BehaviorsExperiment.Samples.NavigateToUriActionSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">
<Button Content="Click to navigate">
<interactivity:Interaction.Behaviors>
<interactivity:EventTriggerBehavior EventName="Click">
<behaviors:NavigateToUriAction NavigateUri="https://aka.ms/toolkit/windows" />
</interactivity:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
</Page>
// 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.
using CommunityToolkit.WinUI.Behaviors;
namespace BehaviorsExperiment.Samples;
[ToolkitSample(id: nameof(NavigateToUriActionSample), nameof(NavigateToUriAction), description: $"A sample demonstrating how to use {nameof(NavigateToUriAction)}.")]
public sealed partial class NavigateToUriActionSample : Page
{
public NavigateToUriActionSample()
{
this.InitializeComponent();
}
}
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
Windows Community Toolkit