ListBox / Rectangle边距,更改所选项的外观,选定项的绑定

时间:2010-11-08 03:16:19

标签: c# wpf binding colors listbox

这里有一些关于ListBox的问题(实际上是3个)

alt text

1。 ListBoxItem / Rectangle边距

从图像来看,我认为边距不均匀,左边似乎有更多的边距。这是我的利润已经设定为

的时候
<ListBox.ItemTemplate>
    <DataTemplate>
        <Rectangle Width="20" Height="20" Margin="1,2,2,2">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding}" />
            </Rectangle.Fill>
        </Rectangle>
    </DataTemplate>
</ListBox.ItemTemplate>

2。如何更改所选项目外观?

我不想要蓝色背景,我可以只有边框吗?

我尝试了Change WPF DataTemplate for ListBox item if selected

中的示例

使用此代码

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Rectangle Width="20" Height="20" Margin="1,2,3,2">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding}" />
                        </Rectangle.Fill>
                    </Rectangle>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Border BorderBrush="DarkGray" BorderThickness="1">
                                <Rectangle Width="20" Height="20" Margin="1,2,3,2">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="{Binding}" />
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

并得到类似

的内容

alt text

第3。所选项目的绑定

我正在尝试将所选颜色绑定到视图模型的属性。如果视图模型中的颜色在提供的颜色列表中不存在,则不应选择任何颜色。将此视为选择颜色的另一种方法,我可以通过RGB / HSB滑块选择颜色。我试过了

<ListBox ItemsSource="{Binding ThemeColors}" SelectedValue="{Binding Color}" SelectionChanged="ListBox_SelectionChanged" ...

然后在C#

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listBox = (ListBox)sender;
    if (listBox.SelectedValue != null) 
        Color = (Color)listBox.SelectedValue;
}

但在那之后,当我尝试用滑块选择颜色时,我会得到一些奇怪的抽搐,有时颜色总是会回弹到从列表框中选择的颜色。但有时它工作正常,我很困惑。

1 个答案:

答案 0 :(得分:2)

1.ListBoxItem带有默认的填充“2,0,0,0”,这就是边缘似乎的原因。这可以在ListBox的ItemContainerStyle中更改

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Padding" Value="0,0,0,0"/>
    </Style>
</ListBox.ItemContainerStyle>

(虽然我似乎用填充1,0,0,0得到了最好的结果。无法解释......)

2.要删除背景并仅显示边框,我认为您必须重新尝试ListBoxItem并修改触发器以使用BorderBrush而不是Border的背景。

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Padding="{TemplateBinding Padding}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="true"/>
                                <Condition Property="Selector.IsSelectionActive" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

对于3.我不确定我明白你想做什么