كيف أقوم بتكوين قالب بيانات WPF لملء عرض مربع القائمة بالكامل؟



3 Answers

<Grid.Width>
    <Binding Path="ActualWidth" 
             RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}" />
</Grid.Width>
Question

لدي ListBox DataTemplate في WPF. أريد عنصر واحد أن يكون ضيق ضد الجانب الأيسر من ListBox آخر لتكون ضيقة ضد الجانب الأيمن ، ولكن لا أستطيع معرفة كيفية القيام بذلك.

حتى الآن لدي Grid ذات ثلاثة أعمدة ، واليمين واليسار بها محتوى والمركز هو عنصر نائب مع عرضه على "*". هل أنا على خطأ؟

هنا هو الرمز:

<DataTemplate x:Key="SmallCustomerListItem">
    <Grid HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <WrapPanel HorizontalAlignment="Stretch" Margin="0">
            <!--Some content here-->
            <TextBlock Text="{Binding Path=LastName}" TextWrapping="Wrap" FontSize="24"/>
            <TextBlock Text=", " TextWrapping="Wrap" FontSize="24"/>
            <TextBlock Text="{Binding Path=FirstName}" TextWrapping="Wrap" FontSize="24"/>

        </WrapPanel>
        <ListBox ItemsSource="{Binding Path=PhoneNumbers}" Grid.Column="2" d:DesignWidth="100" d:DesignHeight="50"
     Margin="8,0" Background="Transparent" BorderBrush="Transparent" IsHitTestVisible="False" HorizontalAlignment="Stretch"/>
    </Grid>
</DataTemplate>



إذا كنت تريد استخدام Grid ، فأنت بحاجة إلى تغيير ColumnDefinition ليصبح:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

إذا لم تكن بحاجة إلى استخدام Grid ، فيمكنك استخدام لوحة DockPanel :

    <DockPanel>
        <WrapPanel DockPanel.Dock="Left">
            <!--Some content here-->
            <TextBlock Text="{Binding Path=LastName}" TextWrapping="Wrap" FontSize="24"/>
            <TextBlock Text=", " TextWrapping="Wrap" FontSize="24"/>
            <TextBlock Text="{Binding Path=FirstName}" TextWrapping="Wrap" FontSize="24"/>
        </WrapPanel>
        <ListBox DockPanel.Dock="Right" ItemsSource="{Binding Path=PhoneNumbers}" 
 Margin="8,0" Background="Transparent" BorderBrush="Transparent" IsHitTestVisible="False"/>
        <TextBlock />
    </DockPanel>

لاحظ TextBlock في النهاية. "DockPanel.Dock" أي عنصر تحكم بدون "DockPanel.Dock" المحدد إلى ملء المساحة المتبقية.




يفرض الأسلوب في إجابة Taeke شريط تمرير أفقي. يمكن إصلاح هذا عن طريق إضافة محول لتقليل عرض الشبكة بعرض عنصر تحكم شريط التمرير العمودي.

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
using System.Windows.Markup;

namespace Converters
{
    public class ListBoxItemWidthConverter : MarkupExtension, IValueConverter
    {
        private static ListBoxItemWidthConverter _instance;

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return System.Convert.ToInt32(value) - SystemParameters.VerticalScrollBarWidth;
        }

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

        #endregion

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return _instance ?? (_instance = new ListBoxItemWidthConverter());
        }
    }
}

أضف مساحة اسم إلى عقدة الجذر الخاصة بك XAML.

xmlns:converters="clr-namespace:Converters"

وقم بتحديث عرض الشبكة لاستخدام المحول.

<Grid.Width>
    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}" Converter="{converters:ListBoxItemWidthConverter}"/>
</Grid.Width>



توسيع إجابة ScrollViewer.HorizontalScrollBarVisibility="Hidden" ، إعداد ScrollViewer.HorizontalScrollBarVisibility="Hidden" لـ ListBox يسمح ListBox التحكم التابع لأخذ عرض الأصل وليس إظهار شريط التمرير.

<ListBox Width="100" ScrollViewer.HorizontalScrollBarVisibility="Hidden">                
    <Label Content="{Binding Path=., Mode=OneWay}" HorizontalContentAlignment="Stretch" Height="30" Margin="-4,0,0,0" BorderThickness="0.5" BorderBrush="Black" FontFamily="Calibri" >
        <Label.Width>
            <Binding Path="Width" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}" />
        </Label.Width>
    </Label>
</ListBox >



Related