WPF 데이터 템플릿이 목록 상자의 전체 너비를 채우도록하려면 어떻게해야합니까?
나는이 ListBox
DataTemplate
WPF에. 한 항목은 왼쪽에 단단히 밀착 ListBox
시키고 다른 항목은 오른쪽에 밀착시키고 싶지만 어떻게해야할지 모르겠습니다.
지금까지 Grid
세 개의 열 이있는 a 가 있고 왼쪽 및 오른쪽 열에는 내용이 있고 가운데는 너비가 "*"로 설정된 자리 표시 자입니다. 내가 어디로 잘못 가고 있습니까?
다음은 코드입니다.
<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>
나는 또한 설정해야했다 :
HorizontalContentAlignment="Stretch"
포함에 ListBox
.
<Grid.Width>
<Binding Path="ActualWidth"
RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}" />
</Grid.Width>
좋습니다. 다음과 같은 정보가 있습니다.
열 0 : WrapPanel
열 1 : 없음
열 2 :ListBox
WrapPanel
왼쪽 가장자리, ListBox
오른쪽 가장자리 및 중간에 남은 것을 차지할 공간을 원하는 것처럼 들립니다 .
이 작업을 수행하는 가장 쉬운 방법은을 사용하는 것이 실제로 DockPanel
하는 없습니다 Grid
.
<DockPanel>
<WrapPanel DockPanel.Dock="Left"></WrapPanel>
<ListBox DockPanel.Dock="Right"></ListBox>
</DockPanel>
WrapPanel
와 사이에 빈 공간을 남겨야 합니다 ListBox
.
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 >
는 Grid
기본적으로 전체 폭을 차지합니다 ListBox
기본 때문에 ItemsPanel
그것을 위해가있다 VirtualizingStackPanel
. 나는 당신이 변하지 않았다고 가정하고 있습니다 ListBox.ItemsPanel
.
아마도 중간을 제거하고 ColumnDefinition
(다른 것은 기본값 "*"
임) HorizontalAlignment="Left"
귀하의 WrapPanel
및 HorizontalAlignment="Right"
에 ListBox
전화 번호를 입력하십시오. ListBox
전화 번호를 만드는 것과 같이 전화 번호를 더 정확하게 정렬하려면 약간 변경해야 할 수도 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"
정의 되지 않은 컨트롤 은 나머지 공간을 채 웁니다.
Taeke의 답변은 잘 작동하며 vancutterromney의 답변에 따라 수평 스크롤바를 비활성화하여 성가신 크기 불일치를 제거 할 수 있습니다. 그러나 필요하지 않을 때 스크롤바를 제거하고 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();
}
}
그런 다음 원하는 최대 / 최소 값과 오프셋에 따라 XAML에서 정의하여 다른 답변에서 언급 한대로 성가신 2 픽셀 크기 불일치를 처리합니다.
<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>
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>
'IT TIP' 카테고리의 다른 글
Laravel 5.2-Eloquent 테이블에 대한 사용자 지정 기본 키로 문자열 사용이 0이 됨 (0) | 2020.12.02 |
---|---|
열을 외래 키로 추가하면 외래 키 제약 조건에서 참조 된 ERROR 열이 존재하지 않습니다. (0) | 2020.12.02 |
iPhone에서 네트워크 트래픽을 어떻게 모니터링합니까? (0) | 2020.12.02 |
TextBlock의 WPF 형식 DateTime? (0) | 2020.12.02 |
스톱워치 틱을 나노초, 밀리 초 및 초로 어떻게 변환합니까? (0) | 2020.12.02 |