ListBox ItemTemplate을 가져와 ListBox의 전체 너비를 가로로 늘리는 방법은 무엇입니까?


356

ListItem을 주황색 배경으로 Listbox의 전체 너비로 확장하고 싶습니다.

현재는 이름 + 성만큼 넓습니다.

가능한 모든 요소를 ​​HorizontalAlignment = "Stretch"로 설정했습니다.

사용자가 Listbox를 확장함에 따라 ListboxItems의 배경을 확장하여 절대 값을 넣고 싶지 않습니다.

ListBoxItems의 배경색이 ListBox의 너비를 채우려면 어떻게해야합니까?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>

답변:


468

나는 이것이 중복이라고 확신하지만 같은 대답으로 질문을 찾을 수 없습니다.

HorizontalContentAlignment="Stretch"ListBox에 추가 하십시오. 그 트릭을해야합니다. HorizontalAlignment실수로 쉽게 얻을 수 있으므로 자동 완성에주의하십시오 .


1
@ Agile Jedi, 사용자 정의 ListBox 항목이있을 때 솔루션에 대해 알고 있습니까? 그 문제에 직면했다.
eoldre

11
실제로이 솔루션은 어떤 이유로 Silverlight에서 작동하지 않습니다. 반면 가브리엘의 해결책은
TimothyP

6
WinRT ListView 컨트롤에서는 작동하지 않습니다. 나는 이미 그것을 시도했다.
uSeRnAmEhAhAhAhAhAhA1

3
이것은 사용자 정의 목록 (Silverlight가 아닌 Windows)에서 잘 작동하며 xaml을 작성할 때 자동 완성에주의하십시오. "Horiz .."를 쓰면 "HorizontalContentAlignment"가 아닌 "HorizontalAlignment"가 표시됩니다. 둘 다 "Stretch"를 사용하기 때문에 첫 번째 제안을 선택하는 것은 매우 쉽습니다.
Jarle Bjørnbeth

1
사용자 정의 항목 너비를 자동으로 설정하면 사용자 정의 항목이 작동합니다.
Lensflare

646

두 게시물을 모두 보았으므로 여기 에서 다른 솔루션을 찾았 습니다 ...

이것은 Myles의 답변입니다.

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

이것은 나를 위해 일했습니다.


@CameronMacFarland 적어도 내 경우에는 silverlight의 이유는 IT 관리자 직원이 Active Directory를 사용하여 WPF / Winform 앱을 배포하는 방법을 알 수 없었기 때문에 우리에게 의존하지 않는 깨끗한 배포 시나리오를 원했기 때문입니다. 업데이트.
Richard B

@RichardB lol 내 의견은 silverlight가 다른 이유와 같이 WPF에 비해 템플릿이 깨진 것처럼 silverlight에 대해 더 많이 언급되었습니다.
Cameron MacFarland

@CameronMacFarland 아 ... 걱정하지 마세요. Silverlight 앱을 수행하고 ServiceReferences.ClientConfig 파일로 어려움을 겪은 후 다른 Silverlight 응용 프로그램을 다시 개발하지 않도록 역병과 같이 피하도록 설정했습니다. 멋진 아이디어 였지만 인상적이지는 않았습니다.
Richard B

1
이것을 listView 내의 데이터 템플릿에 대해 작동 시키려면 : <ListView.ItemContainerStyle> <Style TargetType = "ListViewItem"> <Setter Property = "HorizontalContentAlignment"Value = "Stretch"> </ Setter> </ Style> </ List> .ItemContainerStyle>
Christopher Cook

오류 : BindingExpression 경로 오류 : Project.CustomElement, Project.WindowsPhone, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null에서 'Width'속성을 찾을 수 없습니다. BindingExpression : Path = 'Width'DataItem = Project.CustomElement, Project.WindowsPhone, 버전 = 1.0.0.0, Culture = neutral, PublicKeyToken = null '; 대상 요소는 'Windows.UI.Xaml.Controls.Grid'(이름 = 'null')입니다. 대상 속성은 '폭'( '두 배')
Black Cid

72

항목 인 경우 넓은ListBox, 다른 답변 여기하지 않습니다 도움이 다음의 항목은 ItemTemplate댄 넓은 남아있다 ListBox.

나를 위해 일한 해결책은 가로 스크롤 막대를 비활성화하는 것입니다.이 스크롤 막대는 모든 항목의 컨테이너가 목록 상자만큼 넓게 유지되도록합니다.

따라서 목록 상자만큼 넓은 ListBox 항목을 가져 와서 늘리거나 늘리거나 래핑해야하는 결합 된 수정은 다음과 같습니다.

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

( 스크롤 바 아이디어에 대한 크레딧 )


0

테두리는 시각적 모양으로 만 사용되므로 ListBoxItem의 ControlTemplate에 넣고 속성을 수정할 수 있습니다. ItemTemplate에서는 StackPanel과 TextBlock 만 배치 할 수 있습니다. 이러한 방식으로 컨트롤의 모양이 ControlTemplate을 통해 제어되고 표시 될 데이터가 DataTemplate을 통해 제어되므로 코드도 깨끗하게 유지됩니다.


0

나에 대한 수정은 집합 건물이었다 HorizontalAlignment="Stretch"ItemsPresenter내부 ScrollVieweR ..

이것이 누군가를 돕기를 바랍니다 ...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

0

또한 빠른 해결 방법과 동일한 문제가 있었으며 블렌드를 사용하여 추가되는 패딩 양을 결정했습니다. 제 경우에는 12 였으므로 그것을 없애기 위해 음수 마진을 사용했습니다. 이제 모든 것이 올바르게 중앙에 놓일 수 있습니다

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.