none
ListBoxの横幅に応じて内部のControlItemの幅を変えたい RRS feed

  • 質問

  • ListBox において,高さの変化には ScrollViewer で対応し,幅の変化には ListBoxItem 自体の幅を調整する,という動きを実現しようと考えています.

    具体的には,下記のサンプルコードにおいて,ListBox の幅を小さくすると ListBoxItem の幅が小さくなり,それにつられて ListBoxItem に配置された
    TextBlock の幅も小さくなり入りきらなくなった場合は "…" で省略する...,という動きを実現したいです.

    何かいい案はございませんでしょうか?

    【サンプルコード】
    <UserControl
    	x:Class="Temp.Bomb.View.SubWindow.ContentsList"
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:sx="clr-namespace:System.Xml;assembly=System.Xml"
    	xmlns:local="clr-namespace:Temp.Bomb.View.SubWindow"
    	xmlns:vm="clr-namespace:Temp.Bomb.ViewModel"
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	mc:Ignorable="d">
    
    	<UserControl.Resources>
    		<XmlDataProvider x:Key="dummyData">
    			<x:XData>
    				<TestData xmlns="">
    					<Data Name1="固定" Name2="可変長な領域" Name3="固定"/>
    					<Data Name1="固定" Name2="あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ" Name3="固定"/>
    					<Data Name1="固定" Name2="ABC" Name3="固定"/>
    				</TestData>
    			</x:XData>
    		</XmlDataProvider>
    		
    		<Style x:Key="contentsListStyle" TargetType="{x:Type ListBox}">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ListBox}">
    						<Border CornerRadius="5">
    							<ScrollViewer VerticalScrollBarVisibility="Visible">
    								<StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" IsItemsHost="True"/>
    							</ScrollViewer>
    						</Border>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    
    		<Style TargetType="{x:Type ListBoxItem}">
    			<Setter Property="Opacity" Value="0.5"/>
    			<Setter Property="MaxHeight" Value="67.5"/>
    			<Setter Property="Background" Value="Brown"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ListBoxItem}">
    						
    						<Grid SnapsToDevicePixels="true">
    							<Border x:Name="Border" BorderBrush="Pink" BorderThickness="2" Margin="2">
    								<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    							</Border>
    						</Grid>
    
    						<ControlTemplate.Triggers>
    							<Trigger Property="IsSelected" Value="True">
    								<Setter Property="Opacity" Value="1.0"/>
    							</Trigger>
    							<EventTrigger RoutedEvent="Mouse.MouseEnter">
    								<BeginStoryboard>
    									<Storyboard>
    										<DoubleAnimation Duration="0:0:0.1" Storyboard.TargetProperty="MaxHeight" To="135"/>
    									</Storyboard>
    								</BeginStoryboard>
    							</EventTrigger>
    							<EventTrigger RoutedEvent="Mouse.MouseLeave">
    								<BeginStoryboard>
    									<Storyboard>
    										<DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="MaxHeight"/>
    									</Storyboard>
    								</BeginStoryboard>
    							</EventTrigger>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    
    		<DataTemplate DataType="{x:Type sx:XmlElement}" x:Key="DummyTemplate">
    			<!--<Grid Width="{TemplateBinding ActualWidth}" Background="Aqua">-->
    			<Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualWidth}" Background="Aqua">
    			<!--<Grid>-->
    				<Grid.ColumnDefinitions>
    					<ColumnDefinition Width="Auto"/>
    					<ColumnDefinition Width="*"/>
    					<ColumnDefinition Width="Auto"/>
    				</Grid.ColumnDefinitions>
    				<TextBlock Grid.Column="0" Background="Red" Foreground="White" Text="{Binding XPath=@Name1}"/>
    				<TextBlock Grid.Column="1" Background="Green" Foreground="White" TextTrimming="CharacterEllipsis" Text="{Binding XPath=@Name2}"/>
    				<TextBlock Grid.Column="2" Background="Blue" Foreground="White" Text="{Binding XPath=@Name3}"/>
    			</Grid>
    		</DataTemplate>
    
    	</UserControl.Resources>
    	
    	<Grid>
    		<ListBox x:Name="lbRecordList" SelectionMode="Multiple"
    				 Style="{StaticResource contentsListStyle}"
    				 ItemsSource="{Binding Source={StaticResource dummyData}, XPath=/TestData/Data, UpdateSourceTrigger=PropertyChanged}"
    				 ItemTemplate="{StaticResource DummyTemplate}"/>
    	</Grid>
    </UserControl>
    2010年2月12日 5:30

回答

  • わざわざ ControlTemplate 使わずとも、ListBox への添付プロパティとして ScrollViewer.HorizontalScrollBarVisibility="Disabled" を設定すればできませんか?
    2010年2月12日 6:25

すべての返信