DanBlog

Il blog di Daniele Armanasco
posts - 48, comments - 73, trackbacks - 10

WPF Basic: Pulsante con immagine abilitata/disabilitata tramite stili a cascata

Ho una serie di pulsanti a cui voglio applicare un’immagine, tramite stile, che deve presentarsi in modo differente secondo che il pulsante sia abilitato o disabilitato (comportamento non automatico in WPF).

Passi:

1.       Ho creato un ResourceDictionary che contenga lo stile per tutta l’applicazione:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

 

    <!-- IMMAGINE PULSANTE -->

    <Style x:Key="ImmaginePulsante" TargetType="Image">

        <Style.Triggers>

            <!-- opacità dipendente dall'abilitazione del pulsante -->

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}, AncestorLevel=1}, Path=IsEnabled}" Value="False">

                <Setter Property="Opacity" Value="0.20"></Setter>

            </DataTrigger>

        </Style.Triggers>       

    </Style>

    <!-- -->

   

    <!-- NAVIGATORE ============================================= -->

    <!-- pulsanti -->

    <Style x:Key="PulsanteNavigatore" TargetType="Button">

        <Setter Property="Margin" Value="1"></Setter>

        <Setter Property="Height" Value="Auto"></Setter>

        <Setter Property="Width" Value="Auto"></Setter>

    </Style>

    <!-- immagini dei pulsanti -->

    <Style x:Key="ImmagineNavigatore" BasedOn="{StaticResource ImmaginePulsante}" TargetType="Image">

        <Setter Property="Height" Value="34"></Setter>

        <Setter Property="Width" Value="34"></Setter>

        <Setter Property="Stretch" Value="Fill"></Setter>

    </Style>

    <Style x:Key="ImmaginePrimo" BasedOn="{StaticResource ImmagineNavigatore}" TargetType="Image">

        <Setter Property="Source" Value="..\Immagini\primo.png"></Setter>

    </Style>

    <Style x:Key="ImmaginePrecedente" BasedOn="{StaticResource ImmagineNavigatore}" TargetType="Image">

        <Setter Property="Source" Value="..\Immagini\precedente.png"></Setter>

    </Style>

...ecc...

</ResourceDictionary>

Nello stile si notano: il trigger che modifica l’opacità dell’immagine secondo il valore della proprietà IsEnabled del pulsante che lo contiene; la proprietà BasedOn che permette di innestare gli stili come con i css!

2.       Ho agganciato lo stile generale a tutta l’applicazione nel file Application.xaml:

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Styles\GeneralStyle.xaml"></ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

3.       Ho applicato gli stili ai miei pulsanti e le loro immagini:

<Button Style="{StaticResource PulsanteNavigatore}" Command="{x:Static local:MyCommands.MoveFirst}" >

<Image Style="{StaticResource ImmaginePrimo}"></Image>

</Button>

<Button Style="{StaticResource PulsanteNavigatore}" Command="{x:Static local:MyCommands.MovePrevious}" >

<Image Style="{StaticResource ImmaginePrecedente}"></Image>

</Button>

Print | posted on giovedì 12 febbraio 2009 11.50 |

Comments have been closed on this topic.

Powered by:
Powered By Subtext Powered By ASP.NET