6
votes

Flotter un contrôle sur d'autres contrôles dans WPF

J'ai beaucoup de mal à former cette question.

J'affiche des images de prévisualisation aux utilisateurs de mon UI dans une liste de liste. Lorsqu'un utilisateur plane sur l'image, je voudrais l'étendre afin que l'utilisateur puisse voir plus de détails.

Je suis arrivé au point où je peux "apparaître" l'image, mais bien sûr, elle est toujours dans sa position normale dans la mise en page, ce qui signifie que plutôt que l'image étant affichée sur les autres commandes à proximité , il n'apparaît que sur les commandes rendues avant elle et sous celles rendues après elle. Il est également recadré par les limites de la liste de liste.

y a-t-il un moyen simple (c'est-à-dire sans développement de contrôle personnalisé) de retirer temporairement cette image de la mise en page visuelle et de la mettre au-dessus de tous les autres éléments?

Voici une application de démonstration de merde qui montre de quoi je parle:

Description du problème

Remarquez que l'image zoomée est coupée par les limites de la liste de liste (en dehors de la zone de liste est rouge). Aussi, remarquez que les éléments d'interface utilisateur rendus après la superposition de l'image zoomé, les deux icônes qui viennent plus tard et des noms d'éléments ("point 5" et d'autres personnes vues dans le coin inférieur gauche).

.net wpf controls

0 commentaires

3 Réponses :

3
votes

Cet effet est fréquemment appelé Fisheye. Vous pouvez avoir une meilleure chance à la recherche de ressources en utilisant ce terme. Voici un seul échantillon. http://www.codeproject.com/kb/menus/fisheyemenu.aspx

0 commentaires

9
votes

Si vous recherchez quelque chose de simple, vous pouvez également créer une info-bulle pour l'image (ou ListboxItem) contenant la version plus grande de l'image. Il sera affiché comme une info-bulle normale lorsque l'utilisateur plane sur la version plus petite de l'image. Voici un exemple:

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

1 commentaires

Mec ... génial. Va essayer celui-ci maintenant.

6
votes

La solution qui a fonctionné le mieux pour moi utilisait la popup primitive. Il ne fournit pas grand chose dans la voie du contrôle lorsqu'il s'agit d'animation (il est livré avec des animations de stock) mais vous pouvez animer son contenu quelconque que vous aimez.

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

0 commentaires