WPF中的自定义ListBox

3

我正在尝试在WPF中为聊天Messenger创建自定义ListBox控件。我使用椭圆形来显示在线/离线用户。椭圆形将显示在左侧,一些文本将显示在ListBoxItem的中心。

我想根据某些变量将椭圆形填充属性设置为红色/绿色。

这是我所做的:

<ListBox Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <DockPanel>
                        <Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">
                            <Ellipse.Triggers>
                                <Trigger Property="{Binding Online}" Value="True">
                                    <Setter TargetName="ellipse" Property="Ellipse.Fill" Value="Green"/>
                                </Trigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        <TextBlock Text="{Binding text}"></TextBlock>
                    </DockPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>            
        </ListBox>

在代码中:

myList.Items.Add(new { text="Hello",Online="True"  });

我收到了一个错误提示:

在类型 'ContentPresenter' 上找不到静态成员 'FillProperty'。

我做错了什么?

4个回答

4

显然这是错误的:Property="{Binding Online}"

此外,您应该为触发器使用Style,无需设置TargetName,并且需要考虑优先级,并使用Setter设置默认值。


3

实际上,您使用了一些不正确的方法来解决WPF的某些问题。

  1. 在触发器上绑定一个属性是不会起作用的。您必须使用DataTrigger而不是Triggers。
  2. 对于任何控件动态实现触发器通常不起作用。所以请使用Styles。
  3. 如果您在模板中创建椭圆,请确保为其创建足够的大小,以便用户可以看到它。

请尝试这样做。

<Window.Resources>
    <Style x:Key="elstyle" TargetType="Ellipse">
        <Setter Property="Height" Value="5"/>
        <Setter Property="Width" Value="5"/>
        <Setter Property="Fill" Value="Red"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Online}" Value="true">
                <Setter Property="Fill" Value="Green"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</Window.Resources>
<Grid>
    <ListBox x:Name="myList" HorizontalAlignment="Left" Height="232" Margin="117,74,0,0" VerticalAlignment="Top" Width="207">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <Ellipse Name="ellipse" Margin="5" DockPanel.Dock="Left" Style="{DynamicResource elstyle}">
                    </Ellipse>
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

代码后台。

  public MainWindow()
        {
            Random r = new Random();
            InitializeComponent();
            for (int i = 0; i < 10; i++)
            {
                myList.Items.Add(new { Name = "Name" + i.ToString(), Online = Convert.ToBoolean(r.Next(-1, 1)) });
            }
        }

1

0

你的XAML文件中存在一些问题

  • 需要设置Ellipse的大小
  • 需要使用Style而不是Ellipse.Triggers
  • 如果想要通过某些条件在XAML中更改颜色,需要在Style中设置Fill的颜色

以下是解决你问题的一个可行示例

            <DataTemplate>

                <!--<DockPanel> juste because i like StackPanel-->
                    <StackPanel Orientation="Horizontal">

                    <!--<Ellipse Name="ellipse" Fill="Red" DockPanel.Dock="Left">-->
                    <Ellipse Name="ellipse" Width="15" Height="15">

                        <!--<Ellipse.Triggers>-->
                        <Ellipse.Style>
                            <Style TargetType="Ellipse">      

                                <Setter Property="Fill" Value="Red"/>

                                <Style.Triggers>

                                    <!--<Trigger Property="{Binding Online}" Value="True">-->
                                    <DataTrigger Binding="{Binding Online}" Value="True">
                                        <Setter Property="Fill" Value="LimeGreen"/>
                                    </DataTrigger>

                                </Style.Triggers>

                            </Style>
                        </Ellipse.Style>

                    </Ellipse>
                    <TextBlock Text="{Binding text}"/>

                </StackPanel>
            </DataTemplate>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接