목록 상자 사용자 정의 선택 경계 상자

Question

안녕하세요 Stackoverflowers, 다음 목록 상자에서

, 요소 위에서 내가 마우스가 요소의 오른쪽 아래에 윈도우의 왼쪽 상단에서가는 선택 상자. 이것은 ListBox.ItemsPanel의 Canvas에서 심미성과 마우스 이벤트 모두에 대한 문제입니다.

선택 상자를 요소 내부의 모양으로 만들 수 있는지 알고 싶습니다 (모양이 같고 왼쪽 위 대신 요소 좌표로 시작).

<ListBox ItemsSource="{Binding OverlayElements}" 
      SelectedItem="{Binding SelectedItem}" 
      Background="Transparent"> 

     <ListBox.ItemContainerStyle> 
      <Style TargetType="{x:Type ListBoxItem}"> 
       <Setter Property="IsHitTestVisible" Value="True"></Setter> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
          <Border Background="{TemplateBinding Background}" 
             BorderBrush="{TemplateBinding BorderBrush}" 
             BorderThickness="{TemplateBinding BorderThickness}" 
             HorizontalAlignment="Center"> 
           <ContentPresenter/> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" Value="True"> 
            <Setter Property="Background" Value="#33FF0000"></Setter> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ListBox.ItemContainerStyle> 

     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 

     <ListBox.Resources> 
      <DataTemplate DataType="{x:Type model:EllipseOverlayElement}"> 
       <Path Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}"> 
        <Path.Data> 
         <EllipseGeometry 
          Center="{Binding Center}" 
          RadiusX="{Binding RadiusX}" 
          RadiusY="{Binding RadiusY}"/> 
        </Path.Data> 
       </Path> 
      </DataTemplate> 

      <DataTemplate DataType="{x:Type model:LineOverlayElement}"> 
       <Path Stroke="{Binding Color}" StrokeThickness="{Binding Thickness}"> 
        <Path.Data> 
         <LineGeometry 
          StartPoint="{Binding StartPoint}" 
          EndPoint="{Binding EndPoint}"/> 
        </Path.Data> 
       </Path> 

      </DataTemplate> 
     </ListBox.Resources> 
    </ListBox> 

내가 명확하지 않은지 말해봐.

Answer 1

그냥 제안 - ItemsPanelTemplate에서 Canvas를 사용 하시겠습니까? Canvas가이 문제를 일으키는 것 같습니다.

단순히 Stackpanel을 사용하여 항목을 세로로 배치하고 Datatemplate을 사용하여 Elipse 또는 사각형을 포함 할 수 있습니다. 이렇게하면 좁은 공간에 모양이 생깁니다.

작동하는지 알려주세요.

감사합니다, vishal