根據選項卡的數量自動調整選項卡標題的大小(AvaloniaUI)

我想在我的瀏覽器中實作 TabControl 的樣式，就像在 chrome 中一樣。選項卡的數量不是固定的，所以我希望選項卡標題根據選項卡的數量減少。

為此，我將 DataTemplate 中 Grid 的寬度系結到選項卡的計數，該計數傳遞給轉換器，轉換器回傳實際寬度。

但是由于某種原因這不起作用，我知道 TabItemCount 被準確地傳遞給轉換器。如果轉換器回傳固定值，則沒有什么可以阻止選項卡調整大小

風格：

<Style Selector="TabControl">
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="ItemsPanel">
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" 
                            Height="50"
                            Margin="10,-5,-10,5"></StackPanel>
            </ItemsPanelTemplate>
        </Setter>
        <Setter Property="ContentTemplate">
            <DataTemplate DataType="vm:WebsiteTabVM">
                <views:WebsiteTab></views:WebsiteTab>
            </DataTemplate>
        </Setter>
        <Setter Property="ItemTemplate">
            <DataTemplate DataType="vm:TabVM">
                <Grid Width="{Binding DataContext.TabItemCount, 
                             Converter={StaticResource CountToWidthConverter},
                             RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"
                      HorizontalAlignment="Center" VerticalAlignment="Center"
                      Margin="5">

                      <!--ItemTemplate-->

計數到寬度轉換器：

using Avalonia.Data.Converters;
using System;

namespace SimpleBrowser.Helpers
{
    public class CountToWidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return 1000 / (int)value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

MainVM，它有一個 tabs 屬性的計數：

using Avalonia.Controls;
using Microsoft.Toolkit.Mvvm.Input;
using ReactiveUI;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Input;
using System.Linq;

namespace SimpleBrowser.ViewModels
{
    public class MainVM : ViewModelBase
    {
        public MainVM()
        {
            TabVMs = new ObservableCollection<TabVM>();
            TabVMs.Add(new WebsiteTabVM());
            TabVMs.Add(new WebsiteTabVM() {Name="Test tab withbigtext"});
            TabVMs.Add(new WebsiteTabVM());
            TabVMs.Add(new WebsiteTabVM());

            SortTabs();
        }
        private ObservableCollection<TabVM> _tabVMs;
        public ObservableCollection<TabVM> TabVMs
        {
            get { return _tabVMs; }
            set 
            { 
                this.RaiseAndSetIfChanged(ref _tabVMs, value);
                TabItemCount = TabVMs.Count;
            }
        }

        private double _tabItemCount;
        public double TabItemCount
        {
            get { return _tabItemCount; }
            set { this.RaiseAndSetIfChanged(ref _tabItemCount, value); }
        }

        #region Command
        private ICommand _addNewTab;
        public ICommand AddNewTab
        {
            get
            {
                return _addNewTab ??= new RelayCommand(() =>
                {
                    TabVMs.Add(new WebsiteTabVM());
                    SortTabs();
                });
            }
        }
        private ICommand _removeTab;
        public ICommand RemoveTab
        {
            get
            {
                return _removeTab ??= new RelayCommand<int>(obj =>
                {
                    TabVMs.RemoveAt(obj);
                    SortTabs();
                });
            }
        }
        #endregion

        public void SortTabs()
        {
            for (int i = 0; i < TabVMs.Count; i  )
            {
                TabVMs[i].Index = i;
                TabVMs[i].IsTabLast = false;
            }
            TabVMs.Last().IsTabLast = true;
            TabItemCount = TabVMs.Count;
        }
    }
}

如果您需要更多代碼，我一定會為您提供。感謝您考慮我的要求

uj5u.com熱心網友回復：

我認為您可以將其UniformGrid用作面板模板，這樣您就可以免費獲得所有這些計算

<TabControl.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Rows="1" HorizontalAlignment="Left"/>
    </ItemsPanelTemplate>
</TabControl.ItemsPanel>

那么你可能要指定MinWidth和MaxWidth的TabItem和管理標簽的最大數量的視圖模型。

標籤：C＃ xaml 阿瓦洛尼亚伊 阿瓦隆尼亚

上一篇：使用Windows11主題顏色創建SolidColorBrush

下一篇：XAMLWPFDataGrid：在滾動時減少列寬以適應其內容，除了一個