4

項目がアイコンとテキストとして表示されるリストを含む WPF ユーザー コントロールを作成しています。ただし、テキストの長さはさまざまで、横にスクロールしたいです。代わりに、項目の幅をユーザー コントロールと同じにし、テキストをラップして表示します (したがって、垂直スクロールで)。

ここに私のXAMLがあります

<UserControl x:Class="Demo.NotificationsWidget"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Border CornerRadius="2" 
           BorderThickness="1" BorderBrush="LightGray"
           Background="White">
      <DockPanel LastChildFill="True">
         <TextBlock Text="Alerts" DockPanel.Dock="Top" Margin="5" FontSize="15"/>

         <ListBox Name="alertsList" DockPanel.Dock="Bottom" Margin="5"
               Grid.IsSharedSizeScope="True"
               HorizontalContentAlignment="Stretch"
               BorderThickness="0" 
               ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
               <DataTemplate>
                  <Border BorderThickness="0,1,0,0" BorderBrush="Gray" Margin="5,0,5,5">
                     <Grid>
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition SharedSizeGroup="col1" Width="40" />
                           <ColumnDefinition SharedSizeGroup="col2" Width="*" />
                        </Grid.ColumnDefinitions>

                        <Image Grid.Column="0" Source="{Binding Image}" Width="24" Height="24" Margin="5" />
                        <StackPanel Grid.Column="1" Orientation="Vertical" Margin="5">
                           <TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontWeight="Bold" />
                           <TextBlock Text="{Binding Text}" TextWrapping="Wrap" />
                        </StackPanel>
                     </Grid>
                  </Border>
               </DataTemplate>
            </ListBox.ItemTemplate>
         </ListBox>
      </DockPanel>
   </Border>
</UserControl>

これは、このユーザー コントロールを含むウィンドウのイメージです。コントロールの幅がウィンドウの幅によって異なることに注意してください。

ここに画像の説明を入力

私が欲しいのは、アイテムの幅がリストの幅を超える場合、テキストが折り返されることです(そして、リストの垂直スクロールが得られます)。

リストボックスに追加しようとしScrollViewer.HorizontalScrollBarVisibility="Disabled"ましたが、唯一の結果はスクロールが非表示になっていることです。リスト項目は同じ幅 (コントロールの幅よりも長い) のままです。

説明が不十分だった場合は、Twitter がツイートをリストに表示する方法を見てください。それが私がやりたいことです。ありがとう。

更新:これは基本的に私が達成したいことです:

ここに画像の説明を入力

これは、データ テンプレート グリッドの各列の幅を明示的に設定することで実現できました。

<Grid.ColumnDefinitions>
   <ColumnDefinition SharedSizeGroup="col1" Width="40" />
   <ColumnDefinition SharedSizeGroup="col2" Width="200" />
</Grid.ColumnDefinitions>

ただし、ウィンドウのサイズが変更されると、リストとそのアイテムのサイズが自動的に変更されることが重要です。

4

2 に答える 2

3

TextBlock で試してください：

Width="{Binding ElementName=alertsList, Path=ActualWidth}">

脱ぐ必要がある場合は、この質問に対する私の回答を参照してください

GridViewColumn の幅の調整

于 2012-11-22T14:48:27.600 に答える
2

をに置き換えることで、目的の結果を得ることができましGridたDockPanel。

        <ListBox.ItemTemplate>
           <DataTemplate>
              <Border BorderThickness="0,1,0,0" BorderBrush="Black" Margin="0,0,0,5">
                 <DockPanel LastChildFill="True">
                    <Image DockPanel.Dock="Left" Source="{Binding Image}" Width="24" Height="24" Margin="0,5,0,5"
                           VerticalAlignment="Top"/>

                    <StackPanel DockPanel.Dock="Right" Orientation="Vertical"
                                Margin="5,2,0,0"
                                VerticalAlignment="Top">
                       <TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontWeight="Bold" />
                       <TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="12" Margin="0,2,0,0" />
                    </StackPanel>
                 </DockPanel>
              </Border>
           </DataTemplate>
        </ListBox.ItemTemplate>
于 2012-11-23T07:45:58.050 に答える