次の方法で共有

winui3について、Breadcrumb Bar内の文字が省略された際の挙動を直したい

惇人 矢川 60 評価のポイント
2025-03-04T04:36:04.4+00:00

xamlにてこのように定義して

<BreadcrumbBar x:Name="BreadcrumbBar" ItemsSource="{x:Bind Items}">
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="local:Item">
            <TextBlock FontSize="20" Text="{x:Bind Text}"/>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

namespace winui3base
{
    public record Item(string Text);
    public sealed partial class MainWindow : Window
    {
        public List<Item> Items = new();
        public MainWindow()
        {
            this.InitializeComponent();
            Items.Add(new Item(Text: "あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ"));
            Items.Add(new Item(Text: "あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ"));
            Items.Add(new Item(Text: "あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ"));
        }
    }
}

適当な長い文字を表示するとします。

この時、ウィンドウ幅を狭めていくとパンくずリストのうち表示できない文字が省略されていきます。

省略された文字「...」を押した時に表示されるフライアウトについて、文字数が多いと横スクロール用のバーが表示されるのですが、そのバーをドラッグしても何も動きません。左右端の矢印ボタンをクリックしても動きません。キーボード操作もダメでした。

この動かないスクロールバーは何なのでしょうか。

これを動作するようにする方法を教えていただきたいです。

現状、動かないとスクロールバーが邪魔なので暫定回避策として以下のように400px以下（フライアウトに謎の横スクロールバーが表示されない幅）で文字列を表示してツールチップで全文字表示させています。

<TextBlock FontSize="20" Text="{x:Bind Text}"  TextTrimming="CharacterEllipsis" ToolTipService.ToolTip="{x:Bind Text}" MaxWidth="400"/>
Visual Studio
Visual Studio
Windows、Web、モバイル デバイス用のアプリケーションを構築するための統合開発ツールの Microsoft スイートのファミリ。
128 件の質問
0 件のコメント
承認済みの回答
  1. gekka 11,456 評価のポイント MVP
    2025-03-04T10:48:33.6933333+00:00

    フライアウトを無理やり掘り出して、フライアウト内のScrollBarのHorizontalScrollModeをEnabledにしたら動作するようになりました。

    <?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="CSWinUI3x.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CSWinUI3x"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="CSWinUI3x">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>

        <BreadcrumbBar x:Name="BreadcrumbBar" ItemsSource="{x:Bind Items}">
            <BreadcrumbBar.Resources>
                <!-- Flyoutのテンプレート入れ替え用  -->
                <ControlTemplate x:Key="flyoutTempalte" TargetType="FlyoutPresenter">
                    <Grid Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" BackgroundSizing="InnerBorderEdge">
                        <ScrollViewer x:Name="FlyoutPresenterScrollViewer" 
                                      AutomationProperties.AccessibilityView="Raw" 
                                      Margin="{TemplateBinding Padding}" 
                                      
                                      HorizontalScrollMode="Enabled" 
                                      
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                      Content="{TemplateBinding Content}" 
                                      ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" />
  
                        <Border x:Name="FlyoutPresenterBorder" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                CornerRadius="{TemplateBinding CornerRadius}" />
                    </Grid>
                </ControlTemplate>
            </BreadcrumbBar.Resources>
            
            <BreadcrumbBar.ItemTemplate>
                <DataTemplate x:DataType="local:Item">
                    <TextBlock FontSize="20" Text="{x:Bind Text}" Foreground="red"
                               Loaded="TextBlock_Loaded"
                               TextTrimming="CharacterEllipsis" />
                </DataTemplate>
            </BreadcrumbBar.ItemTemplate>
        </BreadcrumbBar>

    </Grid>
</Window>

    using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

namespace CSWinUI3x
{

    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            for (int i = 0; i < 100; i++)
            {
                Items.Add(new Item(Text:i.ToString()+ " あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ"));
            }
        }

       
        public List<Item> Items = new();

        private void TextBlock_Loaded(object sender, RoutedEventArgs e)
        {
            if (this.tool != null)
            {
                return;
            }

            // BreadcrumbBarからFlyoutを掘り出す
            this.tool = BreadcrumbFlyoutTool.TryGet(this.BreadcrumbBar, (DependencyObject)sender);
            if (this.tool != null
                && this.BreadcrumbBar.Resources.TryGetValue("flyoutTempalte", out var o)
                && o is ControlTemplate template)
            {
                //Flyoutのテンプレートを入れ替え
                tool.ReplaceTemplate(template);
            }

        }

        private BreadcrumbFlyoutTool? tool = null;
    }

    public record Item(string Text);

    class BreadcrumbFlyoutTool
    {
        /// <summary>Flyoutを掘り出す</summary>
        public static BreadcrumbFlyoutTool? TryGet(BreadcrumbBar bar, DependencyObject barItem)
        {
            DependencyObject d = barItem;
            while (d != null)
            {
                d = VisualTreeHelper.GetParent(d);
                if (d is Microsoft.UI.Xaml.Controls.BreadcrumbBarItem baritem)
                {
                    baritem.Background = new SolidColorBrush(Windows.UI.Color.FromArgb(0xff, 0xff, 0, 0));

                    if (VisualTreeHelper.GetParent(baritem) is ItemsRepeater ir)
                    {

                        if (VisualTreeHelper.GetChild(ir, 0) is BreadcrumbBarItem forEllipsis)
                        {
                            //xtemp.barItem = forEllipsis;


                            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(forEllipsis); i++)
                            {
                                if (VisualTreeHelper.GetChild(forEllipsis, i) is Grid grid
                                   && grid.Name == "PART_LayoutRoot")
                                {

                                    if (grid.Resources.TryGetValue("PART_EllipsisFlyout", out var o))
                                    {
                                        if (o is Microsoft.UI.Xaml.Controls.Flyout flyout)
                                        {
                                            var x = new BreadcrumbFlyoutTool(bar, ir, forEllipsis, flyout);
                                            return x;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    break;
                }
            }
            return null;
        }

        private BreadcrumbFlyoutTool(BreadcrumbBar breadcrumbBar, ItemsRepeater ir, BreadcrumbBarItem barItem, Flyout flyout)
        {
            this.ir = ir;
            this.barItem = barItem;
            this.breadcrumbBar = breadcrumbBar;
            this.flyout = flyout;
            this.defaultStyle = flyout.FlyoutPresenterStyle;

            //this.flyout.Closing += (s, e) => e.Cancel = true;
        }

        public readonly BreadcrumbBar breadcrumbBar;
        public readonly ItemsRepeater ir;
        public readonly BreadcrumbBarItem barItem;
        

        public readonly Microsoft.UI.Xaml.Controls.Flyout flyout;
        public readonly Style defaultStyle;

        public void ReplaceTemplate(ControlTemplate template, double? width=null)
        {
            var s = new Style(defaultStyle.TargetType);
            s.BasedOn = defaultStyle;

            s.Setters.Add(new Setter(FlyoutPresenter.TemplateProperty, template));
            if (width != null)
            {
                s.Setters.Add(new Setter(FlyoutPresenter.MinWidthProperty, width));
                s.Setters.Add(new Setter(FlyoutPresenter.MaxWidthProperty, width));
                s.Setters.Add(new Setter(FlyoutPresenter.WidthProperty, width));
            }

            flyout.FlyoutPresenterStyle = s;
        }
    }
}

    # テンプレートは".nuget\packages\microsoft.windowsappsdk\1.6.250205002\lib\net6.0-windows10.0.18362.0\Microsoft.WinUI\Themes\generic.xaml"を参考に

    1 人がこの回答が役に立ったと思いました。
    0 件のコメント

0 件の追加の回答

並べ替え方法: 最も役に立つ
最も役に立つ 新しい順 古い順

お客様の回答

回答は、質問作成者が [承諾された回答] としてマークできます。これは、ユーザーが回答が作成者の問題を解決したことを知るのに役立ちます。