Discussion :

[WDKyle]

Bonsoir,

Je fais mes premiers pas dans le monde merveilleux de WPF/XAML et je peine à faire une chose qui est hyper simple en mon sens

Je crée mes interfaces sous Fireworks/Photoshop et j'ai par exemple un bouton qui à ce style :



Sauf que dans mon application, le bouton peut avoir une largeur (voir même hauteur) plus grande...

J'ai un code de départ mais je vois bien que cela ne suffit pas mais je n'arrive pas à trouver les bonnes propriétés qui pourrait donner le bon rendu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<Button BorderBrush="{x:Null}">
            <Button.Background>
                <ImageBrush ImageSource="images/bouton_menu_bleu.png"/>
            </Button.Background>
        </Button>

Voyez comme c'est laid



Alors que je souhaiterais avoir ce rendu :



Le top serait de pouvoir gérer cela avec mon image crée depuis Fireworks mais sinon j'ai écrit ce petit bout de code qui fonctionne comme je le souhaite mais dès que je l'insère dans le Content d'un button, c'est la cata...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<DockPanel>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Left"/>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Right"/>
            <Rectangle Fill="#FF808080" Height="1" DockPanel.Dock="Top"/>
            <Rectangle Fill="#FF3F5DA3" Height="2" DockPanel.Dock="Top"/>
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFD4D4D4" Offset="0"/>
                        <GradientStop Color="#FFB0B0B0" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </DockPanel>

Merci par avance de votre aide !

[MABROUKI]

bonjour
la prop background du button accepte meme un snap-shot du dockpanel(une photo) avec VisualBrush:

ton code XAML revu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
<Window x:Class="WpfButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DockPanel x:Key="vis">
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Left"/>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Right"/>
            <Rectangle Fill="#FF808080" Height="1" DockPanel.Dock="Top"/>
            <Rectangle Fill="#FF3F5DA3" Height="2" DockPanel.Dock="Top"/>
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFD4D4D4" Offset="0"/>
                        <GradientStop Color="#FFB0B0B0" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </DockPanel>
    </Window.Resources>
    <Grid>
        <Button 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            BorderBrush="{x:Null}" BorderThickness="0.0" Width="200" Height="120">
            <Button.Background>
                <VisualBrush  
 
                               Viewport="0.0,0.0,1.0,1.0"
                              ViewportUnits="RelativeToBoundingBox"
                              Visual="{StaticResource vis}" />
            </Button.Background>
        </Button>
    </Grid>
</Window>

pour ton image je ne comprends ou se situe le souci car ton Botton a ses props :
-HorizontalAlignment et VerticalAlignment =Stretch(par défaut) .
-Ce qui veut dire que l'image s'ajuste aux dimension du Button (ActualWidth et ActualHeight ou courantes)
bon code...

[WDKyle]

Merci pour ton aide mais le résultat n'est pas vraiment celui attendu... Je n'ai qu'un fond gris.

[MABROUKI]

rebonjour

Comprends pas, tu as un image qui comprends un fond gris et tu veux obtenir autre chose à la place ...
Va falloir expliquer ce que tu veux au final !!!

[WDKyle]

Bonjour,

Tu ne vois pas de différence ...? Ce que je souhaite c'est simple, c'est un rendu comme à droite.



Merci.

[MABROUKI]

rebonjour

Le code communiqué par tes soins du Button avec ta propre image (que j'ai pompé ) affiche bien le résultat voulu par toi...

Tu dois avoir un problème ailleurs dans ton code xaml ou behind.cs ,c'est clair !!!

[WDKyle]

Re

Et bien... Quand je ne passe pas par un button, j'ai le résultat escompté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<Window x:Class="WpfDac.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfDac"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
 
    <Grid>
        <DockPanel>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Left"/>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Right"/>
            <Rectangle Fill="#FF808080" Height="1" DockPanel.Dock="Top"/>
            <Rectangle Fill="#FF3F5DA3" Height="2" DockPanel.Dock="Top"/>
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFD4D4D4" Offset="0"/>
                        <GradientStop Color="#FFB0B0B0" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </DockPanel>
    </Grid>
</Window>

Ce qui donne une fenêtre comme ceci :



Il y a bien 2 rectangles gris de 1 pixels de largeur et 1 rectangle gris de 1 pixel de hauteur et 1 dernier rectangle bleu de 2 pixels de hauteur

Je souhaite juste que ce soit non pas contenu dans la Grid de ma Window mais dans le Content d'un Button.

[MABROUKI]

rebonjour

Je répète encore une fois que le code du Button avec un ton image que j'ai "pompé" chez moi (qui comporte un rectangle gris haut ,2 rectangles gris gauche et droit ,celui du bas est absent) m'affiche correctement l'image !!!
il y a donc un souci soit avec la largeur des rectangles dans ton logiciel de dessin ou la résolution de ton moniteur !!!

[WDKyle]

Bizarre... Tu peux faire une capture du rendu de ton coté stp ?

[MABROUKI]

bonjour
voici la capture en piece jointe ...

[WDKyle]

Merci pour ta capture, par contre, c'est avec mon image de départ et non avec le code que tu as donné. Je parle du rendu avec ton code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<Window x:Class="WpfButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DockPanel x:Key="vis">
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Left"/>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Right"/>
            <Rectangle Fill="#FF808080" Height="1" DockPanel.Dock="Top"/>
            <Rectangle Fill="#FF3F5DA3" Height="2" DockPanel.Dock="Top"/>
            <Rectangle>
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFD4D4D4" Offset="0"/>
                        <GradientStop Color="#FFB0B0B0" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </DockPanel>
    </Window.Resources>
    <Grid>
        <Button 
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
            BorderBrush="{x:Null}" BorderThickness="0.0" Width="200" Height="120">
            <Button.Background>
                <VisualBrush  
 
                               Viewport="0.0,0.0,1.0,1.0"
                              ViewportUnits="RelativeToBoundingBox"
                              Visual="{StaticResource vis}" />
            </Button.Background>
        </Button>
    </Grid>
</Window>

[MABROUKI]

rebonjour

Normal car le Rectangle (ou Ellipse ou Path) ont besoin qu'on spécifie leur Width et Height sinon ils sont invisibles d'où ce "gris" qui est en fait la couleur par défaut du Background du DockPanel (je parle de ce rectangle d'arrière plan)....

code XAML revu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<Window x:Class="WpfButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DockPanel x:Key="vis" >
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Left"/>
            <Rectangle Fill="#FF808080" Width="1" DockPanel.Dock="Right"/>
            <Rectangle Fill="#FF808080" Height="1" DockPanel.Dock="Top"/>
            <Rectangle Fill="#FF3F5DA3" Height="2" DockPanel.Dock="Top"/>
            <!--rectangle d'arrière plan-->
            <Rectangle Width="100" Height="100">
                <Rectangle.Fill>
                    <LinearGradientBrush  StartPoint="0.0,0.0" EndPoint="1.0,1.0">
                        <GradientStop Color="#FFD4D4D4" Offset="0"/>
                        <GradientStop Color="#FFB0B0B0" Offset="0.5"/>
 
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </DockPanel>
    </Window.Resources>
    <Grid>
        <Button 
            BorderBrush="{x:Null}" BorderThickness="0.0" Width="300" Height="300">
            <Button.Background>
                <VisualBrush 
                     Stretch="Fill"
                    Visual="{StaticResource vis}"/>
            </Button.Background>
        </Button>
 
    </Grid>
</Window>

bon code....