クリックイベントで画像の一部にWPF

Question

ホームボタンにクリックイベントを配置したいiPhoneイメージがあります。

どのようにWPFでこれを達成できますか？画像にボタンを配置しようとしましたが、望みの結果が得られませんでした。

画像にはどのような種類のコントロールを使用しますか？

<Window.Background> 
    <ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill"> 
    </ImageBrush> 
</Window.Background> 

Answer 1

あなたはCanvasまたはGridのように、適切なパネルに画像を配置し、オーバーレイとして目に見えないボタンを使用することができます。リソースで

：

<Style x:Key="InvisibleButtonStyle" TargetType="Button"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border Background="Transparent" BorderBrush="Red" BorderThickness="1"/> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

使用法：

<Grid Width="150" Height="150"> 
    <ImageBrush ImageSource="Images/Skin/full.png" Stretch="Fill"/> 
    <Button x:Name="TopLeft" Margin="0,0,100,100" Click="TopLeft_Click" Style="{StaticResource InvisibleButtonStyle}"/> 
    <Button x:Name="TopRight" HorizontalAlignment="Right" Click="TopRight_Click" Margin="0,0,0,100" Width="100" Style="{StaticResource InvisibleButtonStyle}"/> 
    <Button x:Name="BottomLeft" VerticalAlignment="Bottom" Click="BottomLeft_Click" Margin="0,0,100,0" Height="100" Style="{StaticResource InvisibleButtonStyle}"/> 
    <Button x:Name="BottomRight" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="BottomRight_Click" Margin="0,0,0,0" Width="100" Height="100" Style="{StaticResource InvisibleButtonStyle}"/> 
</Grid> 

注私は実際にそれが唯一の透明な背景になり、クリック可能な領域を強調するために、透明ボタンに赤い境界線を追加しました。

Answer 2

あなたがクリック可能であることを画像の一部を必要とするので、私はthisソリューションをお勧めします。リンクから

C/P ...

<Canvas> 
    <Image Source="background.png"/> 
    <Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/> 
    <Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/> 
</Canvas> 

Answer 3

私は、次の手順を実行して、これを達成した：

<Canvas Height="30" VerticalAlignment="Top" Margin="0,394,0,0" Width="220"> 
      <Button Content="" Canvas.Left="102" Canvas.Top="6" Background="Transparent" Width="16" BorderBrush="Transparent" Cursor="Hand" > 
       <Button.Style> 
        <Style TargetType="{x:Type Button}"> 
         <Setter Property="Background" Value="Transparent"/> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type Button}"> 
            <Border Background="{TemplateBinding Background}"> 
             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
            </Border> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="Transparent"/> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Button.Style> 
      </Button> 
</Canvas> 

はちょうどあなたのマージンを設定しており、キャンバスは、クリック可能なエリアをオーバーレイする位置を左とトップ。