Descubrí cómo ocultar los puntos de agarre en el lado izquierdo, ahora cómo ocultar esa flecha desplegable para agregar/quitar botones en el lado derecho?¿Cómo ocultar la flecha en el lado derecho de una barra de herramientas?
Google está lleno con la respuesta a esta:
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(0);
}
}
y asignar este método a su barra de herramientas evento Loaded.
Editar:Cerré la brecha también.
Edit2:Se corrigieron los recursos faltantes.
Alternativamente, puede utilizar una copia del estilo con la visibilidad anteriormente mencionada cambiado y el margen de la derecha eliminado, todos esos recursos pertenecen al estilo/plantilla:
<LinearGradientBrush x:Key="ToolBarHorizontalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0"/>
<GradientStop Color="#FFFBFF" Offset="0.5"/>
<GradientStop Color="#F7F7F7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ToolBarToggleButtonVerticalBackground" EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#ECECEC" Offset="0"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#A0A0A0" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ToolBarButtonHover" Color="#C2E0FF"/>
<SolidColorBrush x:Key="ToolBarGripper" Color="#C6C3C6"/>
<Style x:Key="ToolBarVerticalOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ToolBarToggleButtonVerticalBackground}"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,0,3,3" SnapsToDevicePixels="true">
<Canvas HorizontalAlignment="Right" Height="6" Margin="2,7,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="7">
<Path Data="M 1.5 1 L 1.5 6" Stroke="White"/>
<Path Data="M 0.5 0 L 0.5 5" Stroke="{TemplateBinding Foreground}"/>
<Path Data="M 3.5 0.5 L 7 3.5 L 4 6.5 Z" Fill="White"/>
<Path Data="M 3 -0.5 L 6 2.5 L 3 5.5 Z" Fill="{TemplateBinding Foreground}"/>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<LinearGradientBrush x:Key="ToolBarVerticalBackground" EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#FFFFFF" Offset="0"/>
<GradientStop Color="#FFFBFF" Offset="0.5"/>
<GradientStop Color="#F7F7F7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ToolBarToggleButtonHorizontalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#ECECEC" Offset="0"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#A0A0A0" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ToolBarHorizontalOverflowButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ToolBarToggleButtonHorizontalBackground}"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" CornerRadius="0,3,3,0" SnapsToDevicePixels="true">
<Canvas HorizontalAlignment="Right" Height="7" Margin="7,2,2,2" SnapsToDevicePixels="true" VerticalAlignment="Bottom" Width="6">
<Path Data="M 1 1.5 L 6 1.5" Stroke="White"/>
<Path Data="M 0 0.5 L 5 0.5" Stroke="{TemplateBinding Foreground}"/>
<Path Data="M 0.5 4 L 6.5 4 L 3.5 7 Z" Fill="White"/>
<Path Data="M -0.5 3 L 5.5 3 L 2.5 6 Z" Fill="{TemplateBinding Foreground}"/>
</Canvas>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ToolBarButtonHover}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ToolBarGripper}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="ToolBarMenuBorder" Color="#808080"/>
<SolidColorBrush x:Key="ToolBarSubMenuBackground" Color="#FDFDFD"/>
<Style x:Key="ToolBarThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<Rectangle>
<Rectangle.Fill>
<DrawingBrush TileMode="Tile" Viewbox="0,0,4,4" Viewport="0,0,4,4" ViewportUnits="Absolute" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White" Geometry="M 1 1 L 1 3 L 3 3 L 3 1 z"/>
<GeometryDrawing Brush="{StaticResource ToolBarGripper}" Geometry="M 0 0 L 0 2 L 2 2 L 2 0 z"/>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Cursor" Value="SizeAll"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ToolBarMainPanelBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Margin" Value="0,0,11,0"/>
<Setter Property="CornerRadius" Value="3,3,3,3"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="CornerRadius" Value="0,0,0,0"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="ToolBarWithoutOverflowBarStyle" TargetType="{x:Type ToolBar}">
<Setter Property="Background" Value="{StaticResource ToolBarHorizontalBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolBar}">
<Grid x:Name="Grid" Margin="3,1,1,1" SnapsToDevicePixels="true">
<Grid x:Name="OverflowGrid" HorizontalAlignment="Right" Visibility="Hidden">
<ToggleButton x:Name="OverflowButton" ClickMode="Press" FocusVisualStyle="{x:Null}" IsChecked="{Binding IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" IsEnabled="{TemplateBinding HasOverflowItems}" Style="{StaticResource ToolBarHorizontalOverflowButtonStyle}"/>
<Popup x:Name="OverflowPopup" AllowsTransparency="true" Focusable="false" IsOpen="{Binding IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom" StaysOpen="false">
<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
<Border x:Name="ToolBarSubMenuBorder" BorderBrush="{StaticResource ToolBarMenuBorder}" BorderThickness="1" Background="{StaticResource ToolBarSubMenuBackground}" RenderOptions.ClearTypeHint="Enabled">
<ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" KeyboardNavigation.DirectionalNavigation="Cycle" FocusVisualStyle="{x:Null}" Focusable="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" WrapWidth="200"/>
</Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome>
</Popup>
</Grid>
<Border x:Name="MainPanelBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Style="{StaticResource ToolBarMainPanelBorderStyle}" Margin="0">
<DockPanel KeyboardNavigation.TabIndex="1" KeyboardNavigation.TabNavigation="Local">
<Thumb x:Name="ToolBarThumb" Margin="-3,-1,0,0" Padding="6,5,1,6" Style="{StaticResource ToolBarThumbStyle}" Width="10"/>
<ContentPresenter x:Name="ToolBarHeader" ContentSource="Header" HorizontalAlignment="Center" Margin="4,0,4,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</DockPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsOverflowOpen" Value="true">
<Setter Property="IsEnabled" TargetName="ToolBarThumb" Value="false"/>
</Trigger>
<Trigger Property="Header" Value="{x:Null}">
<Setter Property="Visibility" TargetName="ToolBarHeader" Value="Collapsed"/>
</Trigger>
<Trigger Property="ToolBarTray.IsLocked" Value="true">
<Setter Property="Visibility" TargetName="ToolBarThumb" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasDropShadow" SourceName="OverflowPopup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="SnapsToDevicePixels" TargetName="Shdw" Value="true"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Margin" TargetName="Grid" Value="1,3,1,1"/>
<Setter Property="Style" TargetName="OverflowButton" Value="{StaticResource ToolBarVerticalOverflowButtonStyle}"/>
<Setter Property="Height" TargetName="ToolBarThumb" Value="10"/>
<Setter Property="Width" TargetName="ToolBarThumb" Value="Auto"/>
<Setter Property="Margin" TargetName="ToolBarThumb" Value="-1,-3,0,0"/>
<Setter Property="Padding" TargetName="ToolBarThumb" Value="5,6,6,1"/>
<Setter Property="Margin" TargetName="ToolBarHeader" Value="0,0,0,4"/>
<Setter Property="Margin" TargetName="PART_ToolBarPanel" Value="1,0,2,2"/>
<Setter Property="DockPanel.Dock" TargetName="ToolBarThumb" Value="Top"/>
<Setter Property="DockPanel.Dock" TargetName="ToolBarHeader" Value="Top"/>
<Setter Property="HorizontalAlignment" TargetName="OverflowGrid" Value="Stretch"/>
<Setter Property="VerticalAlignment" TargetName="OverflowGrid" Value="Bottom"/>
<Setter Property="Placement" TargetName="OverflowPopup" Value="Right"/>
<Setter Property="Margin" TargetName="MainPanelBorder" Value="0,0,0,11"/>
<Setter Property="Background" Value="{StaticResource ToolBarVerticalBackground}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
Después embebido que en algún lugar se puede establezca el estilo de la barra de herramientas:
<ToolBar Style="{DynamicResource ToolBarWithoutOverflowBarStyle}"/>
Wow ... No puedo creer que requiera tanto trabajo tener una barra de herramientas simple. – mpen
Si no desea el control y el menú desplegable, ¿por qué está utilizando una barra de herramientas? Podrías usar un panel de algún tipo. –
@Ralph: No es mucho trabajo si tienes Expression Blend, puede extraer la plantilla predeterminada, eso es lo que hice aquí. Blend es bastante útil para plantillas, estilos y similares. –
Asigne el siguiente método a su barra de herramientas evento SizeChanged.
private void ToolBar_SizeChanged(object sender, SizeChangedEventArgs e)
{
ToolBar toolBar = sender as ToolBar;
var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement;
if (overflowGrid != null)
{
overflowGrid.Visibility = toolBar.HasOverflowItems ? Visibility.Visible : Visibility.Collapsed;
}
var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement;
if (mainPanelBorder != null)
{
var defaultMargin = new Thickness(0, 0, 11, 0);
mainPanelBorder.Margin = toolBar.HasOverflowItems ?defaultMargin: new Thickness(0);
}
}
esto funciona perfecto para barras de herramientas horizontales. para las barras de herramientas verticales, la flecha aparece no debajo del último botón, sino junto a él (a la derecha, si la barra de herramientas está en el lado izquierdo de la ventana). –
en caso de Orientación.Vertical el margen debe ser Espesor (0, 0, 0, 11) –
Tengo una búsqueda de cuatro horas para hacer esto correctamente con MVVM (por lo que no hay código detrás).
Lo más importante es la "visibilidad contraída" después de ToggleButton y después de ToolBarOverflowPanel (he configurado el color de fondo en negro para mi ejemplo de navegación).
Este es el código que se puede establecer en su barra de herramientas "<toolbar Style="{StaticResource ToolBar}" Background="Black">...</ToolBar>
Aquí está el código para el estilo:
<Style x:Key="Toolbar" TargetType="{x:Type ToolBar}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolBar}">
<Border x:Name="Border" CornerRadius="2" BorderThickness="1" Background="Black" BorderBrush="Black">
<DockPanel >
<ToggleButton Visibility="Collapsed" DockPanel.Dock="Right" IsEnabled="False" IsChecked="False" ClickMode="Press">
<Popup x:Name="OverflowPopup" AllowsTransparency="true" Placement="Bottom" IsOpen="{Binding Path=IsOverflowOpen,RelativeSource={RelativeSource TemplatedParent}}" StaysOpen="false" Focusable="false" PopupAnimation="Slide">
<Border x:Name="DropDownBorder" Background="pink" BorderThickness="1" BorderBrush="pink">
<ToolBarOverflowPanel x:Name="PART_ToolBarOverflowPanel" Margin="2" WrapWidth="200" Focusable="true" FocusVisualStyle="{x:Null}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" Visibility="Collapsed"/>
</Border>
</Popup>
</ToggleButton>
<ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="0,1,2,2"/>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No estoy muy seguro de que en realidad se necesita una barra de herramientas o un tipo de componente que se parece a una barra de menú. Esto es justo lo que quiero:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="Menu1" Padding="10 4">
<MenuItem Header="MenuItem1"/>
<MenuItem Header="MenuItem2"/>
</MenuItem>
<MenuItem Header="Menu2" Padding="10 4">
<MenuItem Header="MenuItem1"/>
<MenuItem Header="MenuItem2"/>
</MenuItem>
</Menu>
<...>
</Grid>
Es posible que no se ajuste a su caso. Solo me gustaría compartir el mío.
Intentó buscar en Google, no pudo encontrarlo. Y esto deja un espacio en el lado derecho donde alguna vez estuvo el botón ... de todos modos para arreglar eso? – mpen
Para el espacio 'OverflowMode =" Never "' debería eliminarlo si recuerdo bien. –
@Andrei: ¿De qué es una propiedad? ¿Dónde lo configuro? ** Editar: ** No importa. Lo encontré. Pero no elimina la brecha. – mpen