カテゴリー別アーカイブ: WPF

[WPF]押下するとイメージが切り替わるボタンの作り方

押下時にイメージが切り替わるボタンって頻繁に使うと思うのですが、標準では無いですよね??
xamlいじればできるのはわかるのですが、これくらいは用意してくれてても。。とか思ったりして。
色々調べるの面倒っす。

愚痴はおいておいて、イメージが切り替わるボタンのサンプルです。
最初にxaml内にControlTemplateを定義します。

<Window.Resources>

<ControlTemplate x:Key="buttonTemplate" TargetType="Button">
    <Border Name="border" BorderThickness="0" BorderBrush="Transparent">
        <Border.Background>
            <ImageBrush ImageSource="普段のイメージ.png" />
        </Border.Background>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Setter TargetName="border" Property="Background" >
                <Setter.Value>
                    <ImageBrush ImageSource="押下された時のイメージ.png" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

</Window.Resources>

ちょっと説明しますと、ボタンの表示をBorderコントロールで行うようにして、そのBackgroundイメージを
プロパティトリガーにより切り替えるようにしています。

で、これをButtonに設定すればOKです。
こんな感じですね。

<Button  Height="90" Width="90"  Template="{StaticResource buttonTemplate}"/>

Buttonのタグ内に直接記述する場合には下記のようになります。

<Button Height="90" Width="90" >
<Button.Template>

    <ControlTemplate  TargetType="Button">
        <Border Name="border" BorderThickness="0" BorderBrush="Transparent">
            <Border.Background>
                <ImageBrush ImageSource="普段のイメージ.png" />
            </Border.Background>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="border" Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="押下された時のイメージ.png" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

</Button.Template>
</Button>

スタイルを書き換えても対応出来そうだったのですが、どうしても上手くいかなかったので
テンプレートを使って対応しました。

あ、そうそう、「IsChecked」に対してのTriggerを追加すればトグルボタンになりますよ。

以上

[WPF]プログレスバーの色を変更する

プログレスバーの進捗状態を示す色を変更するのに四苦八苦しましたので、
こうすれば出来る!ってのをメモっておきます。
つーか、初めからForegrooundで指定した色がそのまま出てくれればいいのになぁ。

最初にxamlの中にリソース定義を記述します。
この例ではPage.Resourcesですが、Windowの時はWindow.Resourcesです。


<Page.Resources>
   <Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
   <Setter Property="Template">
   <Setter.Value>
   <ControlTemplate TargetType="ProgressBar">
             <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2" Padding="1">
           <Grid x:Name="PART_Track" >
               <Rectangle x:Name="PART_Indicator"  HorizontalAlignment="Left" RadiusX="2" RadiusY="2" Fill="{TemplateBinding Foreground}">
               </Rectangle>
           </Grid>
             </Border>
   </ControlTemplate>
   </Setter.Value>
   </Setter>
   </Style>
</Page.Resources>

これを記述したらプログレスバーを定義するわけです。
上のテンプレートはプログレスバーに定義した Background、Foreground、BorderBrush の設定を使って
描画しますのでそれぞれ定義します。
この例では背景を黒、進捗を示す部位は赤のグラデーションで定義しています。

<ProgressBar Height="10" HorizontalAlignment="Stretch" Name="progressBar1" Background="#FF141012"
     Style="{StaticResource ProgressBarStyle}">
     <ProgressBar.Foreground>
          <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
               <GradientStop Color="Black" Offset="0" />
               <GradientStop Color="#FFEF4343" Offset="1" />
          </LinearGradientBrush>
     </ProgressBar.Foreground>
</ProgressBar>

こんな感じでOKです。