Kiểm soát các điều khiển khác trong WPF

Question

Tôi đang gặp khó khăn trong việc phân tích câu hỏi này.

Tôi đang hiển thị hình ảnh xem trước cho người dùng trong giao diện người dùng của tôi trong ListBox. Khi người dùng di chuột qua hình ảnh, tôi muốn mở rộng hình ảnh để người dùng có thể xem thêm chi tiết.

Tôi đã đến mức tôi có thể "bật lên" hình ảnh, nhưng tất nhiên nó vẫn ở vị trí bình thường trong bố cục, có nghĩa là thay vì hình ảnh được hiển thị trên đầu các điều khiển khác gần nó, nó chỉ xuất hiện trên đầu trang của các điều khiển được hiển thị trước nó và bên dưới những điều khiển được hiển thị sau nó. Nó cũng đang bị cắt bởi các giới hạn của ListBox.

Có cách nào đơn giản (tức là, không có cách phát triển kiểm soát tùy chỉnh) tạm thời xóa hình ảnh đó khỏi bố cục hình ảnh và đặt nó lên trên tất cả các yếu tố khác không?

Dưới đây là một ứng dụng demo không hấp dẫn cho thấy những gì tôi đang nói về:

Thông báo hình ảnh thu nhỏ được cắt bớt bởi các giới hạn của ListBox (bên ngoài của hộp danh sách là màu đỏ). Ngoài ra, lưu ý rằng các yếu tố giao diện người dùng được hiển thị sau khi lớp phủ hình ảnh được thu phóng vẫn còn - cả hai biểu tượng đến sau và tên mục ("Mục 5" và các mục khác được thấy ở góc dưới bên trái).

Answer 1

Giải pháp hiệu quả nhất đối với tôi là sử dụng nguyên thủy Popup. Nó không cung cấp nhiều trong cách kiểm soát khi nói đến hình ảnh động (nó đi kèm với hình ảnh động cổ phần), nhưng bạn có thể animate nội dung của nó bất kỳ cách nào bạn thích.

<Image 
    Name="icon" 
    Source="{Binding MaiImaeg}"> 
    <Image.Triggers> 
    <EventTrigger 
     RoutedEvent="Image.MouseEnter"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="6" 
       Duration="0:0:1"> 
      <DoubleAnimation.EasingFunction> 
       <ElasticEase 
        Oscillations="1" 
        Springiness="8" /> 
      </DoubleAnimation.EasingFunction> 
      </DoubleAnimation> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    <EventTrigger 
     RoutedEvent="Image.MouseLeave"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleX" 
       To="0" 
       Duration="0:0:0" /> 
      <DoubleAnimation 
       Storyboard.TargetName="tranny" 
       Storyboard.TargetProperty="ScaleY" 
       To="0" 
       Duration="0:0:0" /> 
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    </Image.Triggers> 
</Image> 
<Popup 
    Name="popup" 
    IsOpen="{Binding IsMouseOver, ElementName=icon, Mode=OneWay}" 
    PlacementTarget="{Binding ElementName=icon}" 
    Placement="Left" 
    Width="640" 
    Height="640" 
    StaysOpen="true" 
    AllowsTransparency="True"> 
    <Image 
     Width="48" 
     Height="48" 
     Source="{Binding MaiImaeg}"> 
     <Image.RenderTransform> 
      <ScaleTransform 
       x:Name="tranny" 
       CenterX="48" 
       CenterY="24" 
       ScaleX="1" 
       ScaleY="1" /> 
     </Image.RenderTransform> 
    </Image> 
</Popup> 

Trong đoạn mã này, cửa sổ bật lên không mở cho đến hình ảnh (có tên là "biểu tượng"). Khi chuột vào hình ảnh, hai điều xảy ra. Cửa sổ bật lên mở ra (ở mức 640x640) và hình ảnh được hiển thị (48px x 48px). Hình ảnh này có quy mô biến đổi trên đó. Các "biểu tượng" hình ảnh cũng có một storyboard cho MouseEnter và MouseLeave. Bảng phân cảnh này sử dụng hoạt ảnh kép, được nhắm mục tiêu theo ScaleTransform của hình ảnh bật lên. Bảng phân cảnh này phóng to hình ảnh khi chuột vào và co lại khi nó rời đi với chức năng giảm xóc đẹp.

Trường hợp sử dụng sẽ là: "Người dùng được hiển thị hộp danh sách có hình ảnh nhỏ cho từng mục trong danh sách. Khi người dùng di chuột qua hình ảnh nhỏ (biểu tượng), nó sẽ tua lên và phóng to, giúp người dùng xem tốt hơn của hình ảnh. Khi con chuột rời khỏi hình ảnh, nó co lại về kích thước ban đầu của nó. "

Answer 2

Hiệu ứng này thường được gọi là Fisheye. Bạn có thể có may mắn hơn khi tìm kiếm các tài nguyên sử dụng thuật ngữ đó. Đây là một mẫu. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

Answer 3

Nếu bạn đang tìm kiếm thứ gì đó đơn giản, bạn cũng có thể tạo chú giải công cụ cho hình ảnh (hoặc ListBoxItem) có chứa phiên bản lớn hơn của hình ảnh. Nó sẽ được hiển thị giống như một chú giải công cụ thông thường khi người dùng di chuột qua phiên bản nhỏ hơn của hình ảnh. Dưới đây là một ví dụ:

<Image Width="100"> 
    <Image.Source> 
     <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
    </Image.Source> 
    <Image.ToolTip> 
     <Image Width="500"> 
      <Image.Source> 
       <BitmapImage UriSource="pack://application:,,/smiley.jpg"/> 
      </Image.Source> 
     </Image> 
    </Image.ToolTip> 
</Image> 

Hiệu quả cũng tương tự như những gì bạn mô tả, ngoại trừ các mục trình đơn vẫn còn đó nhưng đó cũng là một phiên bản lớn hơn của nó cho thấy, như thế này:

alt text http://img695.imageshack.us/img695/4525/tooltipenlarge.png