WPF ToolBar: comment supprimer l'adhérence et le débordement


98

Dans un WPF ToolBarPanel-ToolBar-Menu imbriqué, nous voulons nous débarrasser de la poignée de poignée à gauche et de la zone de débordement à droite. ils sont tous les deux grisés, mais nous aimerions qu'ils ne s'affichent pas du tout.

des idées sur la façon d'y parvenir?

juste au cas où mes termes ne seraient pas tout à fait corrects, si vous regardez l'image de la figure 3 du lien ci-dessous, sur la plus basse des trois barres d'outils, il y a la poignée à gauche de la liste déroulante et à droite de l'extrême droite bouton il y a le débordement.

Image des barres d'outils


Vous pourriez probablement le faire en écrasant le modèle de contrôle ... mais je ne le recommanderais pas.
apandit le

Vous pouvez mettre Margin = "0,0, -14,0" sur la barre d'outils pour pousser le côté droit hors de vue. C'est la solution la plus simple que j'ai trouvée, mais je n'ai testé qu'avec une seule ToolBar pas à l'intérieur d'un ToolBarPanel ou d'un ToolBarTray.
Wayne Bloss

Réponses:


153

La poignée peut être supprimée en définissant la propriété attachée ToolBarTray.IsLocked="True"dans la barre d'outils.

Pour supprimer le bouton à bascule de débordement , vous devrez le supprimer dans un ControlTemplate personnalisé comme le suggère sixlettervariables, ce qui, si vous avez blend ou pouvez télécharger l'aperçu de Blend 3, n'est pas trop difficile.

Vous pouvez également simplement masquer le bouton dans l'événement chargé de la barre d'outils, bien que quel que soit l'itinéraire que vous prenez, vous devez également définir la propriété jointe ToolBar.OverflowMode="Never"dans le menu de la barre d'outils, afin que les éléments ne puissent pas déborder accidentellement dans une zone inaccessible.

<ToolBarPanel DockPanel.Dock="Top">
    <ToolBar ToolBarTray.IsLocked="True" Loaded="ToolBar_Loaded">
        <Menu ToolBar.OverflowMode="Never">
            <MenuItem Header="File" />
            <MenuItem Header="New" />
        </Menu>
    </ToolBar>
</ToolBarPanel>

Et définissez le bouton Bascule de débordement sur réduit:

private void ToolBar_Loaded(object sender, RoutedEventArgs e)
{
    ToolBar toolBar = sender as ToolBar;
    var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement;
    if (overflowGrid != null)
    {
        overflowGrid.Visibility = Visibility.Collapsed;
    }
    var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement;
    if (mainPanelBorder != null)
    {
        mainPanelBorder.Margin = new Thickness();
    }
}

15
Se pose la question: pourquoi utiliser une barre d'outils? Pourquoi ne pas simplement utiliser un simple StackPanel avec des boutons? Quel est l'avantage de la barre d'outils?
Josh G le

5
En réponse à Josh G: Si vous utilisez un bouton transparent avec une image sur un panneau normal (StackPanel, etc.), il aura un contour blanc. Cependant, lorsque le même bouton est placé sur une barre d'outils, le contour blanc n'est pas présent.
Chris Bennet

2
Ceci est également utile si vous voulez le thème d'une barre d'outils dans ce contexte, par exemple le comportement de survol de la souris.
Greg D

36
FYI: Vous pouvez utiliser un simple StackPanel et toujours obtenir le style de la barre d'outils. <Button Style = "{StaticResource {x: Static ToolBar.ButtonStyleKey}}"> <Image Source = "{StaticResource ZoomIn}"> </Image> </Button>
thrag

1
De plus, j'ai trouvé que si vous ne souhaitez pas utiliser le contrôle <Menu> dans votre barre d'outils, la propriété ToolBar.OverflowMode = "Never" peut être définie directement dans votre contrôle <Button> dans votre barre d'outils. Cela a créé l'effet que je recherchais
ford

8

Vous pouvez utiliser Blend pour remplacer simplement ControlTemplate pour ToolBarPanel, Menu ou ToolBar.

  1. Cliquez avec le bouton droit sur la barre d'outils et sélectionnez Modifier le modèle
  2. Dans Modifier le modèle, sélectionnez Modifier une copie
  3. Je recommande d'ajouter la copie à un dictionnaire de ressources
  4. Cliquez sur OK

Vous allez maintenant modifier le modèle de contrôle pour le ToolBarPanel et pouvez définir la visibilité sur Réduit pour le signal de poignée et de débordement. Vous pouvez rincer et répéter pour les autres commandes. Cela prend un peu de temps, mais ce n'est pas très difficile avec Blend.


Merci pour l'info. Malheureusement, blend2 et vs2008 ne semblent pas bien fonctionner ensemble pour nous, trop de problèmes lorsque l'un fonctionne avec du code généré dans l'autre, donc nous ne laissons actuellement pas blend s'approcher de notre code vs;)
Tom

1
Oui, nous avons utilisé Blend assez religieusement jusqu'à ce que VS2k8SP1 arrive. En fait, je souhaite en quelque sorte l'éditeur WPF dans VS2k8 WAS Blend. Il est beaucoup plus agréable de pouvoir faire un clic droit sur quelque chose et de dire Grouper en 'StackPanel' ou 'Border'. Dommage que MS veut que ce soit des expériences différentes.
user7116

Je pense que le nouveau XAML Power Toys ajoute une fonctionnalité qui vous permet de regrouper les contrôles. (Peut-être que c'est le MoXAML Power Toys ...)
Numéro8

8

Vous pouvez "supprimer" le débordement sans fournir un nouveau modèle de contrôle en définissant le ToolBarpour avoir des marges droites négatives (et ajouter une marge gauche négative pour qu'il ne semble pas étrange avec des bords gauches arrondis mais des bords droits carrés). Ensuite, ajoutez ClipToBounds="True"au ToolBarPanelqui coupera les bords de la barre d'outils qui collent maintenant en dehors de la zone du panneau.

<ToolBarPanel Grid.Row="0" ClipToBounds="True">
    <ToolBar ToolBarTray.IsLocked="True" Margin="-5,0,-13,0" Padding="5,0,0,0">
    . . .

5

Plutôt que de masquer complètement le bouton de débordement, je pense qu'il vaut mieux ne le montrer que lorsque cela est nécessaire. Cela peut être fait en liant sa Visibilitypropriété à sa IsEnabledpropriété:

private static void FixupToolBarOverflowArrow(ToolBar toolBar)
{
    Action fixup = () =>
    {
        var overflowButton = toolBar.Template.FindName("OverflowButton", toolBar) as ButtonBase;
        if (overflowButton != null)
        {
            overflowButton.SetBinding(
                VisibilityProperty,
                new Binding("IsEnabled")
                {
                    RelativeSource = RelativeSource.Self,
                    Converter = new BooleanToVisibilityConverter()
                });
        }
    };

    if (toolBar.IsLoaded)
    {
        fixup();
    }
    else
    {
        RoutedEventHandler handler = null;
        handler = (sender, e) =>
        {
            fixup();
            toolBar.Loaded -= handler;
        };

        toolBar.Loaded += handler;
    }
}

(la même chose peut être faite en XAML en redéfinissant le modèle)


3

Je ne fais que commencer avec WPF et je n'ai pu obtenir aucune des méthodes ci-dessus pour masquer ma flèche de débordement (Visual Studio 2010) .La seule chose qui semblait affecter la flèche était l'exemple Toolbar_Load ci-dessus, mais tout ce qui a fait était de transformer la flèche en un espace vide qui avait l'air aussi mauvais que la flèche. Le moyen le plus simple pour moi de comprendre était simplement de définir les marges de la barre d'outils.

<ToolBar Height="26" 
         Name="toolBar" 
         DockPanel.Dock="Top" 
         ToolBarTray.IsLocked="True" 
         ToolBar.OverflowMode="Never"        <!-- no effect -->
         Margin="0,0,-13,0">                 <!-- worked -->
         <Menu ToolBar.OverflowMode="Never"> <!-- no affect -->
             <MenuItem Header="_File"></MenuItem>
         </Menu>
</ToolBar>

0

Les méthodes ci-dessus fonctionnent pour masquer le débordement; J'ai utilisé ce qui suit pour masquer la pince:

         <Label Height="44" Width="30" Background="{StaticResource CtrlBackground}" Margin="-20,0,0,0"></Label>

pour une disposition horizontale, et

         <Label Height="44" Width="230" Background="{StaticResource CtrlBackground}" Margin="0,-20,0,0" HorizontalAlignment="Left"></Label>

pour une disposition verticale. Placez ce qui précède après la barre d'outils (ou ToolbarTray, si vous l'utilisez)

Utilisez la largeur et la hauteur nécessaires pour vos boutons.

Kaxaml est excellent pour jouer avec ce genre de choses.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.