8

Windowsアプリケーションを構築するためのC#とXAMLを学んでいます。画像を背景にしたボタンを作りたかったのです。ただし、ボタンにカーソルを合わせると、ボタンの背景が別の「強調表示された」画像に変わるはずです。背景画像をResources.resxに追加しようとしました。wpfボタンのデフォルトのハイライト効果を取り除くために、xamlスタイルを使用してカスタムボタンを作成する必要がありました。

SOで見つけたコードからカスタムボタンを作成しました。コードは(新しいリソースディクショナリに)あります:

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

resources.resxにあるか別の場所にあるかに関係なく、背景が別の画像に変わるようにするにはどうすればよいですか?(画像にアクセスするために画像をどこに置くかわからない)。私はSOを検索しましたが、見つけた解決策は私が扱っているものとは正確には一致しませんでした。これが重複する質問である場合は、お詫び申し上げます。

概要:

XAMLでマウスオーバートリガーのボタンの背景画像を変更するにはどうすればよいですか?トリガーコードでアクセスできるように、画像をどこに配置しますか?

更新 これは私がトリガーアクションとして設定したものですが、画像は更新されません。イメージビルドアクションをresourceに設定し、Resourcesというフォルダーに配置するようにしました。

コードは次のとおりです。

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

ファイル構造は

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

解決

以下は、ボタン上でのマウスオーバー画像の変更を可能にする完全なコードです。

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

実際の画像は、ルートディレクトリにあるResourcesフォルダーに配置しました。Visual Studioのリソースツールを使用してそこにイメージをインポートした後、[プロパティ]ペインでイメージビルド設定を[リソース]に更新しました。

ソリューションdbasemanをありがとう

4

2 に答える 2

15

/Imagesプロジェクト内のフォルダに画像を追加する方が簡単だと思います。次に、これが使用する構文です。

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" 
                Background="Transparent">
          <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
               <Setter.Value>
                   <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
               </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

MyImage.jpg(画像がImagesプロジェクトのルートにあるフォルダーにあると仮定します。)

MyImage.jpg「ビルドアクション」が「リソース」に設定されている ことを確認してください。

于 2012-09-04T22:06:57.503 に答える
9

これを行う別の方法があります。

画像MouseEnterとMouseLeaveの2つのイベントを使用できます。今あなたのコードでこれを行います。

XAML

<Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

C#

private void image1_MouseEnter(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/Polaroid.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}

private void image1_MouseLeave(object sender, MouseEventArgs e)
{
    string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
    image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
}
于 2015-01-02T12:52:37.497 に答える