動作

2024-11-07

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();
    }
}

次の方法で共有

動作

KeyDownTriggerBehavior

AutoSelectBehavior

ViewportBehavior

FocusBehavior

NavigateToUriAction

フィードバック

その他のリソース