none
Besoin d'aide pour faire une toolbar en WPF RRS feed

  • Discussion générale

  • Bonjour à tous,

    Je souhaiterai refaire une toolbar qui a été faite en WPF.

    Voici ce que j'aimerai refaire :

    Et voila, pour le début, ou j'en suis :

    Voici mon code XAML pour commencer :

      <ToolBarTray Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="33" >
                <ToolBar ToolBarTray.IsLocked="True" Background="#008ede" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  VerticalContentAlignment="Center">
                    <Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
                        <Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
                    </Button>
                    <Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
                        <Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
                    </Button>
                </ToolBar>    
            </ToolBarTray>

    1) Je n'arrive pas à centrer mes icones, j'ai bien ajouté les VerticalContentAlignment et VerticalAlignment à "center", mais rien n'y change.

    2) Savez vous comment s'appelle le petit rectangle blanc sur la droite, avec la petit fleche noir, comment le masquer ?

    3) Sur le premier dessin, savez vous comment faire ce qui est entouré en rouge ? La zone noir ombrée ?

    Je sais que cela fait beaucoup de question, mais j'éspère que certaines ou certains pourront m'aider ici :)

    Je vous remercie à tous :)

    Nixeus

    jeudi 21 février 2013 12:27

Toutes les réponses

  • Bonjour,

    je ne sais pas si tu as toujours ton problème, mais je te propose une solution. La force de WPF c'est XAML, un langage de description d'UI permettant de styler presque tout ce que l'on veut et c'est là une chose très importante dans ton besoin. Voici donc un petit morceaux de code qui semble répondre à ta problématique, à toi de l'adapter pour tes besoins, sot bien attentifs aux Styles :

    <Window.Resources>
            <Style x:Key="ToolBarButton" TargetType="Button">
                <Setter Property="ToolTip" Value="Clear" />
                <Setter Property="Width" Value="16" />
                <Setter Property="Height" Value="16" />
                <Setter Property="Margin" Value="5,0,5,0" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="ToolBarGroup" TargetType="ToolBar">
                <Setter Property="Height" Value="24" />
                <Setter Property="Margin" Value="5,3,5,4" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border BorderThickness="0" CornerRadius="12" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            	<Border.Background>
                            		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            			<GradientStop Color="#FF00304B" Offset="1"/>
                            			<GradientStop Color="#FF046398"/>
                            		</LinearGradientBrush>
                            	</Border.Background>
                                <DockPanel IsItemsHost="True" VerticalAlignment="Stretch" Margin="5,0,5,0" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid>
            <ToolBarTray Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="32" >
                <ToolBar ToolBarTray.IsLocked="True" Style="{StaticResource ToolBarGroup}">
                    <Button Style="{StaticResource ToolBarButton}">
                        <Image Source="accept.png" Width="16" Height="16"></Image>
                    </Button>
                    <Button Style="{StaticResource ToolBarButton}">
                        <Image Source="add.png" Width="16" Height="16"></Image>
                    </Button>
                </ToolBar>
            </ToolBarTray>
        </Grid>

    Voici le rendu de ces styles :

    Tu remarqueras 2 styles permettant de redéfinir le visuel des boutons et des toolbar. Je te conseille de t’intéresser fortement aux styles des contrôles de WPF qui te permettront de réaliser ce que tu souhaites. Si tu n'est pas très à l'aise avec la modification des styles directement en XAML, familiarise toi avec Blend qui est un outil génial pour ce genre de choses.

    Si tu as plus de questions n'hésites pas


    #codingwithfun / .NET

    lundi 25 mars 2013 09:21