Пользовательский ListBox в WPF

Question

Я пытаюсь создать пользовательский элемент управления ListBox в WPF для чата Messenger. Я использую эллипс, чтобы показать пользователя онлайн/оффлайн. Эллипс должен отображаться слева и некоторый текст в центре 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" }); 

Я получаю сообщение об ошибке, как

Cannot find the static member 'FillProperty' on the type 'ContentPresenter'.

Что я делаю неправильно Вот?

Answer 1

вы фактически вводит в заблуждение WPF с некоторыми из этих проблем.

1. Связывание Свойство на триггере не будет работать. вы должны использовать DataTrigger для запуска триггеров.
2. Реализация триггера на лету для любого управления. в большинстве случаев не работает. Так что идите со Стили.
3. Пока вы создаете Ellipse в шаблоне, убедитесь, что вы создали для него достаточный размер. Таким образом, это может быть видно пользователям.

попробуйте это.

<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)) }); 
      } 
     } 

Answer 2

Очевидно, что это не так: Property="{Binding Online}" (читать документацию?)

Также вы должны использовать Style для триггеров, нет необходимости устанавливать TargetName, и вы должны принять precedence во внимание, и использовать Setter для значение по умолчанию.

Answer 3

Вам необходимо установить начальный цвет с помощью Setter, а не в XAML. Для получения дополнительной информации и посмотреть на этот вопрос: Change the color of ellipse when mouse over

Answer 4

Есть несколько вопросов, в вашем XAML

• установить размер вашего Ellipse
• вам нужно использовать Style вместо Ellipse.Triggers
• установить Fill цвет в вашем Style, если вы можете изменить его в XAML в некоторых условиях

здесь Рабочим пример для вашей проблемы

  <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>