Показывать холст детей в списке

Question

Я здесь новый, поэтому, пожалуйста, извините, если я пропустил, чтобы добавить что-то, что необходимо для ответа на мой вопрос.

Так вот мой вопрос: Я пытаюсь добавить фигуры на холст, а также хочу показать их список в списке, чтобы сделать их изменчивыми (размер, положение и т. Д.). Я использую WPF. Есть ли способ сделать это?

И если это вас не беспокоит: может быть, вопрос или сайт или что-то еще о том, как динамически рисовать фигуры (круг, эллипс, прямоугольник и т. Д.) С событиями мыши?

Надеюсь, вы можете мне помочь. Заранее спасибо.

Edit: Учитывая тот факт, что у меня есть:

public partial class MainWindow : Window 
{ 
    public ObservableCollection<string> Baselist = new ObservableCollection<string>(); 
    public ObservableCollection<string> Crystallist = new ObservableCollection<string>(); 
    public ObservableCollection<Shape> Shapelist = new ObservableCollection<Shape>(); 
    public MainWindow() 
    { 
     this.ResizeMode = System.Windows.ResizeMode.CanMinimize; 
     InitializeComponent(); 
     InitializeLists(Baseforms,CrystalGroups); 
    } 

private void InitializeLists(ComboBox Baseforms, ComboBox CrystalGroups) 
    { 
     Baseforms.ItemsSource = Baselist; 
     CrystalGroups.ItemsSource = Crystallist; 
     Shape Circle = new Ellipse(); 
     Circle.Stroke = System.Windows.Media.Brushes.Black; 
     Circle.Fill = System.Windows.Media.Brushes.DarkBlue; 
     Circle.HorizontalAlignment = HorizontalAlignment.Left; 
     Circle.VerticalAlignment = VerticalAlignment.Center; 
     Circle.Width = 50; 
     Circle.Height = 50; 
     Shapelist.Add(Circle); 
    } 

Как я могу использовать ItemsControl, чтобы показать фигуры в Shapelist в холсте, а также перечислив их в Listbox?

Надеюсь, этот вопрос будет менее широким.

Answer 1

Пожалуйста, попробуйте следующее решение:

обновленную версию (XAML и код позади)

1. DetailsList вид списка - представлены подробные данные, основанные на классе ShapeDataPresentation (поддерживает множественный выбор). Показывает данные по шаблону данных с именем ShapeDataPresentationDataTemplate.
2. Элементы управления фигурными знаками - отображает фигуры на холсте (не поддерживает многоэкранный выбор только один).

код ListView XAML ("Это" это имя содержащего окна ListView)

<Window x:Class="ListViewWithCanvasPanel.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:listViewWithCanvasPanel="clr-namespace:ListViewWithCanvasPanel" 
    Title="MainWindow" Height="350" Width="525" x:Name="This" ResizeMode="CanResize"> 
<Grid> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="2.5*"></ColumnDefinition> 
      <ColumnDefinition Width="4*"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <ListView x:Name="DetailsList" Panel.ZIndex="999" Grid.Column="0" ItemsSource="{Binding ElementName=This, Path=Shapes}" SelectionMode="Extended" SelectionChanged="Selector_OnSelectionChanged"> 
      <ListView.Resources> 
       <DataTemplate x:Key="ShapeDataPresentationDataTemplate" DataType="listViewWithCanvasPanel:ShapeDataPresentation"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition></ColumnDefinition> 
          <ColumnDefinition></ColumnDefinition> 
          <ColumnDefinition></ColumnDefinition> 
         </Grid.ColumnDefinitions> 
         <TextBlock Grid.Column="0" Text="{Binding Name, StringFormat={}{0:N0}%}"></TextBlock> 
         <TextBlock Grid.Column="1"> 
          <Run Text="W:"></Run> 
          <Run Text="{Binding OriginalRectAroundShape.Width}"></Run> 
         </TextBlock> 
         <TextBlock Grid.Column="2"> 
          <Run Text="H:"></Run> 
          <Run Text="{Binding OriginalRectAroundShape.Height}"></Run> 
         </TextBlock> 
        </Grid> 
       </DataTemplate> 
      </ListView.Resources> 
      <ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="ContentTemplate"> 
         <Setter.Value> 
          <DataTemplate DataType="Shape"> 
           <ContentControl Content="{Binding Tag}" ContentTemplate="{StaticResource ShapeDataPresentationDataTemplate}"></ContentControl> 
          </DataTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </ListView.ItemContainerStyle> 
     </ListView> 
     <GridSplitter Grid.Column="0" Width="3" Background="Blue" Panel.ZIndex="999" 
      VerticalAlignment="Stretch" HorizontalAlignment="Right" Margin="0"/> 
     <ItemsControl Grid.Column="1" x:Name="ShapesPresentor" ItemsSource="{Binding ElementName=This, Path=Shapes}" 
        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
        MouseDown="UIElement_OnMouseDown"> 
      <!--<ListView.Resources> 
       <ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem"> 
        <ContentControl Content="{Binding }"></ContentControl> 
       </ControlTemplate> 
      </ListView.Resources>--> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <Canvas Background="White" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <!--<ListView.ItemContainerStyle> 
       <Style TargetType="ListViewItem"> 
        <Style.Triggers> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true" /> 
           <Condition Property="Selector.IsSelectionActive" Value="true" /> 
          </MultiTrigger.Conditions> 
          <Setter Property="Template" Value="{StaticResource SelectedTemplate}" /> 
         </MultiTrigger> 
        </Style.Triggers> 
       </Style> 
      </ListView.ItemContainerStyle>--> 
     </ItemsControl> 
    </Grid> 
    <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Orientation="Horizontal"> 
     <ComboBox x:Name="Baseforms"></ComboBox> 
     <ComboBox x:Name="CrystalGroups"></ComboBox> 
    </StackPanel> 
</Grid> 

код позади (обновлено)

/// <summary> 
/// Interaction logic for MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window 
{ 
    public static readonly DependencyProperty ShapesProperty = DependencyProperty.Register(
     "Shapes", typeof (ObservableCollection<Shape>), typeof (MainWindow), 
     new PropertyMetadata(default(ObservableCollection<Shape>))); 

    public ObservableCollection<Shape> Shapes 
    { 
     get { return (ObservableCollection<Shape>) GetValue(ShapesProperty); } 
     set { SetValue(ShapesProperty, value); } 
    } 

    public ObservableCollection<string> Baselist = new ObservableCollection<string> {"a", "b", "c"}; 
    public ObservableCollection<string> Crystallist = new ObservableCollection<string>{"aa", "bb", "cc"}; 

public ObservableCollection<Shape> Shapelist = new ObservableCollection<Shape>(); 
    private SolidColorBrush _originalColorBrush = Brushes.Tomato; 
    private SolidColorBrush _selectedColorBrush; 
    private double _diameter; 

    public MainWindow() 
    { 
     _diameter = 50d; 
     this.ResizeMode = System.Windows.ResizeMode.CanMinimize; 
     Shapes = new ObservableCollection<Shape>(); 
     InitializeComponent(); 
     InitializeLists(Baseforms, CrystalGroups); 
    } 

    private void InitializeLists(ComboBox Baseforms, ComboBox CrystalGroups) 
    { 
     Baseforms.ItemsSource = Baselist; 
     CrystalGroups.ItemsSource = Crystallist; 
     Shape Circle = new Ellipse(); 
     Circle.Stroke = System.Windows.Media.Brushes.Black; 
     Circle.Fill = System.Windows.Media.Brushes.DarkBlue; 
     Circle.HorizontalAlignment = HorizontalAlignment.Left; 
     Circle.VerticalAlignment = VerticalAlignment.Center; 
     Circle.Width = 50; 
     Circle.Height = 50; 
     Shapelist.Add(Circle); 
    } 


    private void UIElement_OnMouseDown(object sender, MouseButtonEventArgs e) 
    { 
     var inputElement = sender as IInputElement; 
     if (inputElement == null) return; 
     var point = e.GetPosition(inputElement); 
     Shape shape = new Ellipse 
     { 
      Stroke = Brushes.Black, 
      Fill = _originalColorBrush, 
      Width = _diameter, 
      Height = _diameter 
     }; 
     var byX = point.X - _diameter/2d; 
     var byY = point.Y - _diameter/2d; 

     var existingShape = Shapes.FirstOrDefault(shapeToCheck => 
     { 
      var data = shapeToCheck.Tag as ShapeDataPresentation; 
      if (data == null) return false; 
      var res = data.OriginalRectAroundShape.IntersectsWith(new Rect(point,point)); 
      return res; 
     }); 

     if (existingShape == null) 
     { 
      var shapeDataPresentation = new ShapeDataPresentation { Name = string.Format("Ox:{0}, Oy:{1}", point.X.ToString("##.###"), point.Y.ToString("##.###")), OriginalRectAroundShape = new Rect(new Point(byX, byY), new Size(_diameter, _diameter)) }; 
      shape.Tag = shapeDataPresentation; 
      shape.ToolTip = new ToolTip{Content = shapeDataPresentation.Name}; 
      var translateTransform = new TranslateTransform(byX, byY); 
      shape.RenderTransform = translateTransform; 
      Shapes.Add(shape); 
     } 
     else 
     { 
      if (DetailsList.SelectedItems.Contains(existingShape) == false) 
      { 
       DetailsList.SelectedItems.Clear(); 
       DetailsList.SelectedItems.Add(existingShape); 
      } 
     } 


    } 

    private void Selector_OnSelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     var currentSelected = e.AddedItems.OfType<Shape>().ToList(); 
     var prevSelected = e.RemovedItems.OfType<Shape>().ToList(); 
     if (currentSelected.Count > 0) 
     { 
      currentSelected.ForEach(shape => 
      { 
       _selectedColorBrush = Brushes.CadetBlue; 
       shape.Fill = _selectedColorBrush; 
      }); 
     } 
     if (prevSelected.Count > 0) 
     { 
      prevSelected.ForEach(shape => 
      { 
       shape.Fill = _originalColorBrush; 
      }); 
     } 

    } 
} 

public class ShapeDataPresentation 
{ 
    public string Name { get; set; } 
    public Rect OriginalRectAroundShape { get; set; } 
} 

Как это выглядит

Резюме:

1. Здесь вы можете создать элемент по щелчку мыши на холсте, мыши вниз обрабатываются в коде (UIElement_OnMouseDown).
2. Разрешенный выбор и многоэкранный выбор, каждый раз, когда вы делаете выделение, он обрабатывается кодом (Selector_OnSelectionChanged).

Но лучше использовать подход на основе MVVM для работы в wpf.

С уважением.