2011-01-19 3 views
5

이미지 컨트롤 위에 마우스가 있으면 팝업 팝업을 표시하고 싶습니다. 그래서 내가 컨트롤 템플릿을 만들고,이 같이 :이미지 컨트롤 위에 마우스가있을 때 팝업 표시

 <ControlTemplate x:Key="AvatarImageTemplate" TargetType="{x:Type Image}"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition></RowDefinition> 
        <RowDefinition></RowDefinition> 
       </Grid.RowDefinitions> 

       <HERE I WANT IMAGE SOURCE Grid.Row="0"/> 
       <Popup IsOpen="False" 
          Name="OponentImagePopUp"        
          AllowsTransparency="True" 
          PopupAnimation="Slide" 
          HorizontalOffset="-35" 
          VerticalOffset="0" 
          Grid.Row="1"> 
        <Border BorderThickness="1" 
           BorderBrush="Black"> 
         <Grid Height="350" MinWidth="350"> 
          <Grid.Background> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.3"> 
            <LinearGradientBrush.GradientStops> 
             <GradientStop Color="LightGray" Offset="0"/> 
             <GradientStop Color="WhiteSmoke" Offset="1"/> 
            </LinearGradientBrush.GradientStops> 
           </LinearGradientBrush> 
          </Grid.Background> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="75"></ColumnDefinition> 
           <ColumnDefinition Width="*"></ColumnDefinition> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"></RowDefinition> 
          </Grid.RowDefinitions> 

          <Border BorderThickness="1" 
            BorderBrush="Black" 
            Background="White" 
            Margin="4,4,4,4" 
            Grid.Column="0"> 
           <Image Margin="2,2,2,2"> 
            <Image.Source > 
             <MultiBinding Converter="{StaticResource avatarConverter}"> 
              <Binding Path="ProfilePhoto"></Binding> 
              <Binding Path="StatusInfo.IsLogged"></Binding> 
             </MultiBinding> 
            </Image.Source> 
           </Image> 
          </Border> 
         </Grid> 
        </Border> 
       </Popup> 
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter TargetName="OponentImagePopUp" Property="IsOpen" Value="True" /> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

을 나는 두 가지 문제가 있습니다

  1. 내가하지 내가 컨트롤 템플릿에 이미지 소스에 액세서 할 수있는 방법 또한
  2. 내가 시도 할 경우를 이미지 컨트롤에 스타일을 만들고 속성 템플릿 -> 이미지 컨트롤에는 속성 템플릿이 없습니다.

내 목표는 더 큰 이미지 만 표시되는 팝업 팝 창입니다.

편집 :

내가 여기있다, 이미지 컨트롤을 통보 씨 Glazkov으로, 간단한 컨트롤을 만들 : 뒤에

<UserControl x:Class="Spirit.Controls.AvatarImageControl" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <Grid> 
     <Image x:Name="SmallImage" 
      Source="{Binding ElementName=root, Path=ImageSource}" 
      Stretch="Fill"/> 
    </Grid> 
</UserControl> 

코드가 동일합니다

public partial class AvatarImageControl : UserControl 
    { 
     public AvatarImageControl() 
     { 
      InitializeComponent(); 
     } 

     public ImageSource ImageSource 
     { 
      get { return (ImageSource)GetValue(ImageSourceProperty); } 
      set { SetValue(ImageSourceProperty, value); } 
     } 

     public static readonly DependencyProperty ImageSourceProperty = 
      DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvatarImageControl), new UIPropertyMetadata(null)); 

    } 

이 컨트 리뷰트를 다음과 같이 사용하십시오.

<Grid Background="#99CCFF" Margin="4,4,4,4"> 
     <Controls:AvatarImageControl ImageSource="{Binding Path=Oponent.Info.ProfilePhoto,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"/> 
</Grid> 

저는 Uri의 속성 유형을 AvatarImageControl의 ImageSource에 바인딩합니다.

내가 뭘 잘못 했니?

또한 나는 사용자 컨트롤이 시도 :

<Grid> 
    <Image x:Name="SmallImage" 
     Source="{Binding Path=ImageSource, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
     Stretch="Fill"/> 
</Grid> 

결과는 동일합니다.

뷰에서 사용자 정의 컨트롤을 사용하고 뷰 모델 유형의 Uri에서 ImageSource 속성을 바인딩합니다. 다른 건 없어.

편집 2 : 씨 Glazkov 생산 예외의 코드 :

{"Set property 'System.Windows.Controls.Primitives.Popup.IsOpen' threw an exception."} 
{"A TwoWay or OneWayToSource binding cannot work on the read-only property 'IsMouseOver' of type 'System.Windows.Controls.Image'."} 
StackTrace: 
    at System.Windows.Markup.XamlReader.RewrapException(Exception e, IXamlLineInfo lineInfo, Uri baseUri) 
    at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri) 
    at System.Windows.Markup.WpfXamlLoader.LoadBaml(XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri) 
    at System.Windows.Markup.XamlReader.LoadBaml(Stream stream, ParserContext parserContext, Object parent, Boolean closeStream) 
    at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator) 
    at Spirit.Controls.AvatarImageControl.InitializeComponent() in c:\Users\Jan\Documents\Visual Studio 2010\Projects\BACKUP\Pokec__Messenger\Spirit_Caliburn_Micro_v1.0\Controls\AvatarImageControl.xaml:line 1 
    at Spirit.Controls.AvatarImageControl..ctor() in C:\Users\Jan\Documents\Visual Studio 2010\Projects\BACKUP\Pokec__Messenger\Spirit_Caliburn_Micro_v1.0\Controls\AvatarImageControl.xaml.cs:line 24 

해결 방법은 다음과 같습니다 한방향에 모드를 결합

<Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay}"> 

설정합니다.

잘 작동합니다.

Mr. Glazkov에게 도움을 청합니다. 이것에

+0

당신은 당신의 UserControl에 이름을 지정하는 것을 잊었다는 (내 대답에 선 4 참조) : x : Name = "root" –

+0

오키, 아직이 문제를 해결합니다. –

+0

예, 바인딩 모드를 잊었습니다 ... 내 대답이 업데이트되었습니다. –

답변

9

Control에서 파생되지 않았기 때문에 이미지 컨트롤에 대한 컨트롤 템플릿을 정의 할 수 없으므로 컨트롤 템플릿이 없습니다. OnRender 메서드에서 렌더링됩니다.

당신이 할 수있는 일은 하나의 의존성 속성 ImageSource을 가진 사용자 정의 컨트롤을 만드는 것입니다. 뒤에 코드 (AvatarImage.xaml.cs) 여기

<UserControl x:Class="AvatarImage" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      x:Name="root"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Image x:Name="SmallImage" 
       Source="{Binding ElementName=root, Path=ImageSource}" 
       Grid.Row="0" /> 
     <Popup IsOpen="{Binding ElementName=SmallImage, Path=IsMouseOver, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" 
       Name="OponentImagePopUp" 
       AllowsTransparency="True" 
       PopupAnimation="Slide" 
       HorizontalOffset="-35" 
       VerticalOffset="0" 
       Grid.Row="1"> 
      <Border BorderThickness="1" 
        BorderBrush="Black"> 
       <Grid Height="350" 
         MinWidth="350"> 
        <Grid.Background> 
         <LinearGradientBrush StartPoint="0,0" 
              EndPoint="0,0.3"> 
          <LinearGradientBrush.GradientStops> 
           <GradientStop Color="LightGray" 
               Offset="0" /> 
           <GradientStop Color="WhiteSmoke" 
               Offset="1" /> 
          </LinearGradientBrush.GradientStops> 
         </LinearGradientBrush> 
        </Grid.Background> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="75"></ColumnDefinition> 
         <ColumnDefinition Width="*"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"></RowDefinition> 
        </Grid.RowDefinitions> 

        <Border BorderThickness="1" 
          BorderBrush="Black" 
          Background="White" 
          Margin="4,4,4,4" 
          Grid.Column="0"> 
         <Image Margin="2,2,2,2"> 
          <Image.Source> 
           <MultiBinding Converter="{StaticResource avatarConverter}"> 
            <Binding Path="ProfilePhoto"></Binding> 
            <Binding Path="StatusInfo.IsLogged"></Binding> 
           </MultiBinding> 
          </Image.Source> 
         </Image> 
        </Border> 
       </Grid> 
      </Border> 
     </Popup> 
    </Grid> 
</UserControl> 

을 그리고 : 여기에이 컨트롤의 XAML은

public partial class AvatarImage : UserControl 
{ 
    public AvatarImage() { 
     InitializeComponent(); 
    } 

    public ImageSource ImageSource { 
     get { return (ImageSource)GetValue(ImageSourceProperty); } 
     set { SetValue(ImageSourceProperty, value); } 
    } 

    public static readonly DependencyProperty ImageSourceProperty = 
     DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(AvatarImage), new UIPropertyMetadata(null)); 
} 
+0

Gj, 멋지고 완전한 대답은 UserControl도 제안 할 예정이었습니다. –

+0

Mr. Glazkov 나는 당신의 솔루션을 시도하지만 내가 뭘 잘못하는지 모르겠다. 내 생각에 이미지가있는 사용자 컨트롤이 보이지 않는다. –

+0

내 게시물에 대한 내 의견을 참조하십시오. 또한 여기에 그것을 반복합니다 : "당신은 UserControl에서 이름을 지정하는 것을 잊었습니다 (내 대답은 4 행 참조) : x : Name ="root "" –

4

일반적인 접근 방식은 :

<CONTROL> 
     <Grid> 
      <!-- Actual control content --> 
      <Popup IsOpen="{Binding RelativeSource={RelativeSource AncestorType=CONTROL}, Path=IsMouseOver, Mode=OneWay}"> 
       <!-- Popup content --> 
      </Popup> 
     </Grid> 
    </CONTROL> 

당신은 RelativeSource 결합뿐만 아니라, 당신은 단지 조상 형 이미지 검색을 통해 이미지 소스에 액세스 할 수 있습니다.

편집 : 귀하의 질문이 정리되어 이제 두 가지 특정 문제에 대한 코드를 찾을 수 있습니다.
편집 2 : 너무 느림 ...

관련 문제