wpf - リストボックスの幅全体を WPF データ テンプレートで埋めるにはどうすればよいですか?

Question

私はListBox DataTemplateWPFを持っています。1 つのアイテムを の左側に、ListBox別のアイテムを右側にぴったりと合わせたいのですが、これを行う方法がわかりません。

これまでのところGrid、3 つの列があり、左右の列にはコンテンツがあり、中央には幅が「*」に設定されたプレースホルダーがあります。どこが間違っていますか？

コードは次のとおりです。

<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>

Answer 1

私も設定する必要がありました：

HorizontalContentAlignment="Stretch"

を含む上にListBox。

Answer 2

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

Answer 3

わかりました、これがあなたが持っているものです：

列0：WrapPanel
列1：なし
列2：ListBox

WrapPanel左端ListBox、右端、そして真ん中に残っているものを占めるスペースが欲しいようです。

これを行う最も簡単な方法は、実際には、DockPanelではなく、を使用することGridです。

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

WrapPanelこれにより、との間に空きスペースが残りますListBox。

Answer 4

Taeke の答えを拡張して、ScrollViewer.HorizontalScrollBarVisibility="Hidden"for aを設定すると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 >

Answer 5

を使用する場合は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"、残りのスペースを埋めます。

Answer 6

のデフォルトは。であるため、デフォルトではGridの幅全体を占める必要があります。私はあなたが変わっていないと仮定しています。ListBoxItemsPanelVirtualizingStackPanelListBox.ItemsPanel

おそらく、真ん中を取り除きColumnDefinition（他はデフォルトです"*"）、電話番号のとをHorizontalAlignment="Left"付けます。電話番号を作成するなど、電話番号をさらに正しく配置するには、少し変更する必要がある場合があります。WrapPanelHorizontalAlignment="Right"ListBoxListBoxDataTemplate

Answer 7

Taeke's answer はうまく機能し、vancutterromney's answer に従って、水平スクロールバーを無効にして迷惑なサイズの不一致を取り除くことができます。ただし、スクロールバーが不要な場合はスクロールバーを削除し、ListBox が小さくなりすぎた場合はスクロールバーを自動的に有効にするという、両方の長所を活用したい場合は、次のコンバーターを使用できます。

/// <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();
    }
}

次に、他の回答で述べたように、必要な最大/最小値と、その厄介な 2 ピクセル サイズの不一致に対処するためのオフセットに従って XAML で定義します。

<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>