WinUI3 メモ タグ別 - DrumMidiEditor/DrumMidiEditorApp GitHub Wiki

ComboBox

ItemsSource の使い方

private ObservableCollection<string> _PlayerDisplayList = new();
<ComboBox ItemsSource="{x:Bind _PlayerDisplayList, Mode=OneTime}">
    <ComboBox.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <TextBlock Text="{x:Bind}" />
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

GridView

Header

GridViewの Header 項目はViewの左または右に表示されるので
上に表示したい場合は、TextBlock で設定する。

<TextBlock x:Uid="InputJumpMeasure" />
                
<GridView>
</GridView>

変更イベント

選択内容の変更イベントは下記２つを拾う。

  • GridView_SelectionChanged
  • GridView_ItemClick

ドラッグ＆ドロップによる並び替え

ObservableCollection で ItemSourceを作成する必要あり。

<GridView x:Name="_MidiMapGroupGridView"
    ItemsSource="{x:Bind _TmpMidiMapGroupList, Mode=OneWay}"
    SelectionMode="Single"
    CanReorderItems="True"
    CanDragItems="True"
    AllowDrop="True"
    DragItemsStarting="MidiMapGroupGridView_DragItemsStarting"
    DragItemsCompleted="MidiMapGroupGridView_DragItemsCompleted">
/// <summary>
/// 編集中のMidiMapリスト
/// </summary>
private readonly ObservableCollection<MidiMapGroup> _TmpMidiMapGroupList = new();

/// <summary>
/// MidiMapGroup のドラッグ開始
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
private void MidiMapGroupGridView_DragItemsStarting( object sender, DragItemsStartingEventArgs args )
{
        if ( args.Items.Count != 1 )
        {
            return;
        }

        if ( args.Items[ 0 ] is not MidiMapGroup group )
        {
            return;
        }

        args.Data.RequestedOperation = DataPackageOperation.Move;
}

/// <summary>
/// MidiMapGroup のドラッグ終了
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
private void MidiMapGroupGridView_DragItemsCompleted( ListViewBase sender, DragItemsCompletedEventArgs args )
{
        switch ( args.DropResult )
        {
        	case DataPackageOperation.Move:
	                if ( args.Items.Count != 1 )
	                {
	                    return;
	                }

	                if ( args.Items[ 0 ] is not MidiMapGroup group )
	                {
	                    return;
	                }
	                break;
	        }
	}
}

ItemClickイベント

選択中の選択アイテムを再度選択した場合に処理したい場合

<GridView
        SelectionMode="Single"
        SelectionChanged="MeasureNoGridView_SelectionChanged"
     +  IsItemClickEnabled="True"
     +  ItemClick="MeasureNoGridView_ItemClick">
private void MeasureNoGridView_ItemClick( object sender, ItemClickEventArgs args )
{
    if ( sender is not GridView item )
    {
        return;
    }

    var oldValue = item.SelectedValue;
    var newValue = args.ClickedItem;

    // 同じ値が選択された場合
    if ( oldValue?.Equals( newValue ) ?? false )
    {
	・・・
    }
}

SelectionChangedイベントを削除して、ItemClickイベントのみ実装の方がいいか

NavigationView

ページキャッシュ

参考URL
https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.xaml.controls.page.navigationcachemode?view=winrt-18362

NavigationView で Viewを移動すると Pageが新規作成されてしまい、
メンバ変数の情報がリセットされてしまう。

ページをキャッシュする為に Pageタグの属性「NavigationCacheMode」を
「Enabled」または「Required」に設定する。

動作の違いは、フレームのキャッシュサイズ制限（CacheSize）を超えた場合

  • Enabled：キャッシュされない可能性あり
  • Required：サイズ制限に関係なく常にエントリを生成

ページ切替効果

// ページ切替効果
//   ページ更新　　：EntranceNavigationTransitionInfo
//   ドリル　　　　：DrillInNavigationTransitionInfo
//   横方向スライド：SlideNavigationTransitionInfo
//   無効化    　　：SuppressNavigationTransitionInfo

_ContentFrame.Navigate( page_after, null, new SuppressNavigationTransitionInfo() );

NumberBox

必須入力チェック

WinUI3 の NumberBox って必須入力チェックはタグの属性から制御できるのだろうか？
取り合えず自前で実装しておこう

<NumberBox x:Name="_MusicInfoBgmVolumeNumberBox" 
    x:Uid="MusicInfoBgmVolumeNumberBox"
    Value="{x:Bind _MusicInfo.BgmVolume, Mode=TwoWay}" 
    Minimum="{x:Bind _ConfigMedia.BgmMinVolume, Mode=OneTime}"
    Maximum="{x:Bind _ConfigMedia.BgmMaxVolume, Mode=OneTime}"
    ValidationMode="InvalidInputOverwritten"
    ValueChanged="NumberBox_RequiredInputValidation"
/>
private void NumberBox_RequiredInputValidation( NumberBox sender, NumberBoxValueChangedEventArgs args )
{
	if ( Double.IsNaN( args.NewValue ) )
	{
		sender.Value = args.OldValue;
	}
}

入力書式設定

_NoteHeightNumberBox.NumberFormatter
    = XamlHelper.CreateNumberFormatter( 1, 1, 0.1 );
public static INumberFormatter2 CreateNumberFormatter( int aIntegerDigits, int aFractionDigits, double aIncrement )
{
    // NumberBox の入力書式設定

    return new DecimalFormatter
        {
            IntegerDigits   = aIntegerDigits,
            FractionDigits  = aFractionDigits,
            NumberRounder   = new IncrementNumberRounder
            {
                Increment           = aIncrement,
                RoundingAlgorithm   = RoundingAlgorithm.RoundHalfAwayFromZero, // ★注意★
            },
            IsGrouped       = true,
            IsZeroSigned    = true,
        };
}

RoundingAlgorithm を正しく設定しないと Minimum, Maximum の設定がうまく効かないので注意

入力書式設定を行っていない状態で数値を上下すると下記のようになる。
image

入力書式のRoundingAlgorithm に基づいて、数値が処理された後 Minimum, Maximumの範囲内かのチェックが行われるので
RoundingAlgorithmによっては、Minimum, Maximumの値まで数値を入力できない場合がある。

Window

複数ウィンドウ

問題点

  • MainWindow 以外のウィンドウを作成する場合
    　アプリ終了時にエラーとなり、アプリが終了しない。

  • AppWindow.Create() でウィンドウ作成した場合
    　現状、ウィンドウに対してコンテンツが設定できないっぽい。
    　https://github.com/microsoft/microsoft-ui-xaml/issues/6755

    ElementCompositionPreview.SetAppWindowContent( appWindow, page );
    これのメソッドが winui3 にはない。

  • CoreApplication.CreateNewView() は UWPのみサポート

参考URL https://docs.microsoft.com/ja-jp/windows/apps/design/layout/app-window

タイトルバーのカスタマイズ

参考URL
https://docs.microsoft.com/ja-jp/windows/apps/develop/title-bar?tabs=wasdk
https://github.com/microsoft/microsoft-ui-xaml/issues/6993

// 独自のタイトルバー設定
ExtendsContentIntoTitleBar = true;
SetTitleBar( AppTitleBar );
AppTitleTextBlock.Text = $"{Config.System.AppName}";

<Window>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="32" />
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <Grid x:Name="AppTitleBar">
            <TextBlock
                x:Name="AppTitleTextBlock"
                Margin="0"
                Padding="10"
                VerticalAlignment="Center"
                Style="{StaticResource CaptionTextBlockStyle}"
                Text="App title"
                TextWrapping="NoWrap" />
        </Grid>

        <local:PageEditerMain Grid.Row="1" />

    </Grid>
</Window>
⚠️ **GitHub.com Fallback** ⚠️