Truc #2 : le clipping « naturel » en XAML

Lorsque l’on transforme un élément graphique, il n’est pas rare que celui-ci sorte de la zone qui lui est attribuée.
C’est parfois gênant lorsque l’objet cache des informations ou des boutons indispensables à l’application.
Pour illustrer le problème j’ai crée une petite application contenant un bouton rouge en dessous d’un titre, le tout gérer dans un Grid.

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Background="Black" Grid.Row="0" >
            <TextBlock Text="titre" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </Grid>

        <Button Grid.Row="1"  Background="Red" Content="Hello" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <CompositeTransform ScaleY="1" ScaleX="1"></CompositeTransform>
            </Button.RenderTransform>
        </Button>

    </Grid>

On va maintenant zoomer le bouton en affectantles propriétés ScaleX et ScaleY de son CompositeTransform à 5.

Le bouton sort de son cadre et cache le titre :/

Pour que le titre ne soit pas caché on pense naturellement à la propriété Clip du Bouton mais celui ci peut avoir un impact sur les performances de l’application et n’est pas toujours facile à mettre en place (voir ce behavior). On va donc plutot s’appuyer sur le clipping « naturel » de XAML en deplaçant simplement le titre après le bouton en conservant leur Grid.Row respectif. Ainsi le titre est dessiné sur le bouton en conservant sa position !

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="1"  Background="Red" Content="Hello" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <CompositeTransform ScaleY="1" ScaleX="1"></CompositeTransform>
            </Button.RenderTransform>
        </Button>


        <Grid Background="Black" Grid.Row="0" >
            <TextBlock Text="titre" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </Grid>

    </Grid>

Evidemment cela dépend de la configuration de votre interface graphique mais dans la plupart des cas cela fonctionnera parfaitement.

2 Responses to Truc #2 : le clipping « naturel » en XAML

  1.  

    C’est du bricolage qui ne fonctionne pas dans de nombreux cas….

  2. Bonjour JLM,
    Le coût d’un clipping logiciel est relativement élevé lorsqu’il n’est pas prise en compte par le GPU comme c’est le cas pour Windows Phone.
    Tu peux penser que ce « truc », puisque c’en est un, est du bricolage mais non seulement dans la plupart des cas il marche mais en plus il est très économe en ressource.
    Il faut juste savoir construire sa page proprement.

     

leave your comment