代码之家  ›  专栏  ›  技术社区  ›  Eric Haskins

如何使WPF数据模板填充列表框的整个宽度?

  •  57
  • Eric Haskins  · 技术社区  · 17 年前

    ListBox DataTemplate 在WPF中。我想要一件紧挨着桌子的左边 列表框 另一个项目是紧靠右侧,但我不知道如何做到这一点。

    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>
    
    8 回复  |  直到 12 年前
        1
  •  146
  •   Dave Clemmer manu    12 年前

    我还必须设置:

    HorizontalContentAlignment="Stretch"
    

    ListBox .

        2
  •  24
  •   Dave Clemmer manu    12 年前
    <Grid.Width>
        <Binding Path="ActualWidth" 
                 RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}" />
    </Grid.Width>
    
        3
  •  4
  •   Dave Clemmer manu    12 年前

    好的,以下是您所拥有的:

    WrapPanel
    第1栏:无
    第2栏: ListBox

    听起来像是你想要的 折叠容器 在左边, 列表框 在右边,空间占据中间剩下的东西。

    最简单的方法就是使用 DockPanel ,而不是 Grid .

    <DockPanel>
        <WrapPanel DockPanel.Dock="Left"></WrapPanel>
        <ListBox DockPanel.Dock="Right"></ListBox>
    </DockPanel>
    

    这将在 列表框 .

        4
  •  2
  •   Dave Clemmer manu    12 年前

    扩展Taeke的答案,设置 ScrollViewer.HorizontalScrollBarVisibility="Hidden" 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 >
    
        5
  •  1
  •   Joel B Fant    17 年前

    Grid ListBox ItemsPanel VirtualizingStackPanel . 我想你有 改变 ListBox.ItemsPanel

    也许如果你去掉中间的部分 ColumnDefinition (其他为默认值 "*" ),并将 HorizontalAlignment="Left" WrapPanel HorizontalAlignment="Right" 列表框 电话号码。你可能得改变一下 列表框 让电话号码更准确地对齐,例如创建 DataTemplate 为了他们。

        6
  •  1
  •   Dave Clemmer manu    12 年前

    如果你想使用 Grid ,那么您需要更改您的 ColumnDefinition

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

    如果你不需要使用 网格 ,那么你可以使用 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" 已定义的将填充剩余的空间。

        7
  •  0
  •   BCA    9 年前

    /// <summary>
    /// Value converter that adjusts the value of a double according to min and max limiting values, as well as an offset. These values are set by object configuration, handled in XAML resource definition.
    /// </summary>
    [ValueConversion(typeof(double), typeof(double))]
    public sealed class DoubleLimiterConverter : IValueConverter
    {
        /// <summary>
        /// Minimum value, if set. If not set, there is no minimum limit.
        /// </summary>
        public double? Min { get; set; }
    
        /// <summary>
        /// Maximum value, if set. If not set, there is no minimum limit.
        /// </summary>
        public double? Max { get; set; }
    
        /// <summary>
        /// Offset value to be applied after the limiting is done.
        /// </summary>
        public double Offset { get; set; }
    
        public static double _defaultFailureValue = 0;
    
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null || !(value is double))
                return _defaultFailureValue;
    
            double dValue = (double)value;
            double minimum = Min.HasValue ? Min.Value : double.NegativeInfinity;
            double maximum = Max.HasValue ? Max.Value : double.PositiveInfinity;
            double retVal = dValue.LimitToRange(minimum, maximum) + Offset;
            return retVal;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    

    <ListBox.Resources>
        <con:DoubleLimiterConverter x:Key="conDoubleLimiter" Min="450" Offset="-2"/>
    </ListBox.Resources>
    

    <Grid.Width>
        <Binding Path="ActualWidth" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}" Converter="{StaticResource conDoubleLimiter}"  />
    </Grid.Width>
    
        8
  •  0
  •   Kevin Hilt    8 年前

    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>
    
    推荐文章