Пустите в ход управление другими средствами управления в WPF

Question

Пустите в ход управление другими средствами управления в WPF

Мне нелегко даже формулировать этот вопрос.

Я отображаю изображения предварительного просмотра пользователям в моем UI в ListBox. Когда пользователь нависает над изображением, я хотел бы развернуть его так, пользователь видит больше детали.

Я перешел к сути дела, где я могу "открыться" изображение, но конечно это все еще в его нормальном положении в расположении, означая, что, а не изображение, отображаемое сверх других средств управления около него, он только появляется сверх средств управления, представленных перед ним и под представленными после него. Это также обрезается границами ListBox.

Существует ли простое (т.е. никакая разработка пользовательского элемента управления), путь к, временно, удаляет то изображение из визуальной разметки и поместил его, прежде всего, другие элементы?

Вот дрянное демонстрационное приложение, которое показывает то, о чем я говорю:

Description of the issue

Заметьте, что масштабируемое изображение отсекается границами ListBox (за пределами поля списка, является красным). Кроме того, заметьте, что элементы UI, представленные после масштабируемого изображения, накладывают его все еще - и значки, которые прибывают позже и названия товара ("Объект 5" и другие, замеченные в нижнем левом углу).

6

.net wpf controls

задан 26 July 2011 в 11:49

3 ответа

Если вы ищете что-то простое, вы также можете создать всплывающую подсказку для изображения (или ListBoxItem), которая содержит большую версию изображения. Он будет отображаться так же, как обычная всплывающая подсказка, когда пользователь наводит курсор на уменьшенную версию изображения. Вот пример:

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

Эффект аналогичен тому, что вы описываете, за исключением того, что пункт меню все еще там, но также показан его увеличенный вариант, например:

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

8

ответ дан 8 December 2019 в 13:46

Этот эффект часто называют "рыбий глаз". Возможно, вам больше повезет с поиском ресурсов, использующих этот термин. Вот один образец. http://www.codeproject.com/KB/menus/FishEyeMenu.aspx

3

ответ дан 8 December 2019 в 13:46

Другие вопросы по тегам:

.net wpf controls

Похожие вопросы:

score 6 · Accepted Answer

Лучшим решением для меня было использование примитива Popup. Когда дело доходит до анимации, он не обеспечивает особого контроля (он поставляется со стандартными анимациями), но вы можете анимировать его содержимое любым удобным для вас способом.

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

В этом фрагменте всплывающее окно не открывается до тех пор, пока IsMouseOver не будет истинным для его изображения (с именем «icon»). Когда мышь входит в изображение, происходят две вещи. Открывается всплывающее окно (с разрешением 640x640 пикселей) и отображается изображение (48 пикселей на 48 пикселей). Это изображение имеет масштабное преобразование. Изображение "icon" также имеет раскадровку для MouseEnter и MouseLeave. В этой раскадровке используется двойная анимация, нацеленная на ScaleTransform всплывающего изображения. Эта раскадровка увеличивает изображение при вводе мыши и сжимает его при выходе с красивой функцией замедления.

Пример использования: «Пользователю предоставляется список с небольшими изображениями для каждого элемента в списке. Когда пользователь наводит курсор на маленькое изображение (значок), оно перемещается вперед и увеличивается, давая пользователю лучший обзор изображение. Когда мышь покидает изображение, оно возвращается к исходному размеру. "