調整WPF ListBox選擇框的大小

Question

對於一個項目，我實現了一個類似於控件的小型IntelliSense，它不是一個ListBox 。 它的DataTemplate包含一個StackPanel包含一個Image和一個TextBlock 。 沒有其他的。 正如您在我的控件的第一個屏幕截圖中所看到的，ListBox的選擇框選擇整個項目（通常正是人們所期望的）：

但是我VS11的“被盜”圖標質量很差，所以我想像Visual Studio那樣調整選擇：

您可以看到只選擇了文本（可視化表示確實忽略了圖像/圖標），我也想知道如何實現這種行為。

編輯：圖標只是具有透明背景的GIF文件。 我將用更好的替換它們，但盡管如此我仍然非常關注如何獲得理想的行為。

Answer 1

這是一個替換ListBoxItem控件模板的解決方案。 在我的測試中，我只顯示兩個文本字符串，第二個突出顯示。

<Page.Resources>
    <Style x:Key="ItemStyle" TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <ContentPresenter/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="Selected" TargetType="{x:Type TextBlock}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=IsSelected, 
                         RelativeSource={RelativeSource Mode=FindAncestor, 
                         AncestorType={x:Type ListBoxItem}}}" Value="True">
                <Setter Property="Background" 
                        Value="{x:Static SystemColors.HighlightBrush}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="ItemTemplate" DataType="{x:Type ViewModel:DataItem}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" SharedSizeGroup="c1"/>
                <ColumnDefinition Width="auto" SharedSizeGroup="c2"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Source="../Images/Collapse.png"/>
            <TextBlock Grid.Column="1" Text="{Binding Name}" Margin="0,0,5,0"/>
            <TextBlock Style="{StaticResource Selected}" 
                       Grid.Column="2" Text="{Binding Description}"/>
        </Grid>
    </DataTemplate>
</Page.Resources>

<Page.DataContext>
    <Samples:Page3ViewModel/>
</Page.DataContext>

<Grid>
    <ListBox 
        Grid.IsSharedSizeScope="True"
        SelectedIndex="2"
        HorizontalContentAlignment="Stretch"
        ItemsSource="{Binding Items}" 
        ItemContainerStyle="{StaticResource ItemStyle}"
        ItemTemplate="{StaticResource ItemTemplate}"/>
</Grid>

視圖模型包含一組簡單數據項

public class Page3ViewModel
{
    public Page3ViewModel()
    {
        Items = new List<DataItem>
            {
                new DataItem{Name = "One", Description = "First"},
                new DataItem{Name = "Two", Description = "Second"},
                new DataItem{Name = "Three", Description = "Third"},
                new DataItem{Name = "Four", Description = "Fourth"},
            };
    }
    public IEnumerable<DataItem> Items { get; private set; }
}

給予

Answer 2

您的問題是由於WPF呈現ListBox中的每個項目的方式。 它使用ItemContainerStyle包裝ListBoxItem中的每個項目。 這個ListBoxItem包含要顯示的內容（在您的情況下是包含Image和TextBlock的StackPanel）。

默認情況下， ListBoxItem在其顯示的所有內容周圍顯示藍色矩形。

我想出了一個解決方案，但這是一個黑客攻擊。 只需使圖像更大，背景像素顏色與列表框的背景顏色（在我的情況下為白色）匹配，並使用以下XAML。

<ListBox Margin="5"
         ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal"
                        Margin="-2,0,0,0">
                <Image Source="Save-icon.png" />
                <TextBlock Margin="5,8,0,0"
                           Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
     </ListBox.ItemTemplate>
</ListBox>

這是結果：

更新

我已經提出了一個修改，這使得它不那么糟糕。 在我的ItemTemplate中，我用一個Border包圍了圖像，它使用綁定從它的父ListBox中獲取它的背景顏色。 （圖像周圍不再有邊框）。

將XAML更新為：

<ListBox Margin="5"
         ItemsSource="{Binding Items}"
         Background="LightSteelBlue">

    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal"
                        Margin="-2,0,0,0">
                <Border Background="{Binding Path=Background, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        Padding="10">
                    <Image Source="Save-icon.png"/>
                 </Border>
                 <TextBlock Margin="5,8,0,0"
                            Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>

</ListBox>

這是新結果：

現在您需要做的就是更新ListBox的背景顏色，一切都會自動調整。 例如

<ListBox Margin="20"
         ItemsSource="{Binding Items}"
         Background="PeachPuff">