Why do my commandbindings only work if button is in toolbar? - wpf

I have a window with a toolbar which contains some buttons with commands.
The Buttons stopped working since i replaced the toolbar with a stackpanel containing the buttons.
In my understanding this shound not make any difference. The buttons still have the Command property set, i did not change anything in my custom commands class and the CommandBinding are also still the same. They are implemented some grids and usercontrols deeper than the button, but they do work, as long as the buttons are in a ToolBar control!
If i implement CommandBindings directly in the Window they work (but that is not what i want)
Here's the code (abridged):
<Window>
<Grid>
<StackPanel>
<Button Command="gui:GuiCommands.Hello">Hello</Button>
</StackPanel>
<Grid>
<TabControl>
<TabItem Header="MyTab">
<Grid>
<Grid.CommandBindings>
<CommandBinding Command="gui:GuiCommands.Hello" Executed="hello_Clicked"/> <!-- THIS WOULD NOT WORK -->
</Grid.CommandBindings>
<Grid>
</TabItem>
</TabControl>
</Grid>
</Grid>
<Window.CommandBindings>
<CommandBinding Command="gui:GuiCommands.Hello" Executed="hello_Clicked"/> <!-- THIS WOULD WORK -->
</Window.CommandBindings>
</Window>
I know it would not compile but i had to simplify it. This works as soon as i replace "StackPanel" with "ToolBar" with my app. How can that be?

Okay, i guess is figured it out by my self again (why does this always happen right after i posted the question?)
Short: I needed to set FocusManager.IsFocusScope="true" on the StackPanel
Long: see the answer to this question: Do I have to use CommandTarget? I thought any focused element would receive the Command

A StackPanel only arranges child elements into a single line that can be oriented horizontally or vertically.
While a Toolbar provides a container for a group of commands or controls.
So what happens if you put a StackPanel element inside of the ToolBar
<ToolBar>
<StackPanel>
<Button Command="gui:GuiCommands.Hello">Hello</Button>
</StackPanel>
</ToolBar>

Related

Can you repeat a block of controls inside a Ribbon?

My app has a number of ribbon tabs and there is a certain group of ribbon controls that needs to be repeated on a few of these tabs. These are not dynamic content, just static elements that are used repeatedly.
I could just repeat the XAML for those controls in 2-3 places but it seemed that there should be a cleaner way to do this...
I have tried to create a UserControl to house the repeated elements, but with mixed success. I've pasted below what I've done. This does work in the sense that the contents of the UserControl are shown within each RibbonTab; but here are the problems:
Without the UniformGrid (or any other 'standard' panel like WrapPanel ) it is not possible to include multiple Ribbon controls in the UserControl. But because this panel controls the layout these controls don't correctly participate in the usual Ribbon layout rules (such as when your window is resized & the ribbon control sizes can change.)
I have to wrap the UserControl inside a RibbonGroup in each place it is used. Initially I intended to have the RibbonGroup be the main panel inside the UserControl, but this did not layout correctly - all the subsidiary controls were rendered almost entirely below the lower ribbon border?
I have the sense that some type of templating solution may be a better choice. I have read however that some of the Ribbon controls were designed not following typical WPF standards for how templates are used and that adds a lot of uncertainty.
Note that while I'd probably prefer a XAML-only approach, if some code behind neatly gets this done I think that would be fine.
UserControl:
<UserControl x:Class="ribbon1.SampleUC" ...>
<UniformGrid Columns="2" Rows="1">
<RibbonButton
Label="Zoom In"
SmallImageSource="..."
/>
<RibbonButton
Label="Zoom Out"
SmallImageSource="..."
/>
</UniformGrid>
</UserControl>
Main ribbon:
<Ribbon>
...
<RibbonTab Header="Tab1">
...
<RibbonGroup>
<l:SampleUC/>
</RibbonGroup>
</RibbonTab>
<RibbonTab Header="Tab2">
...
<RibbonGroup>
<l:SampleUC/>
</RibbonGroup>
</RibbonTab>
...
</Ribbon>
Replace the UserControl Tag in SampleUC.xaml with RibbonGroup and change the parent class in the code behind file.
<RibbonGroup x:Class=".SampleUC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UniformGrid Columns="2" Rows="1">
<RibbonButton Label="Zoom In" />
<RibbonButton Label="Zoom Out" />
</UniformGrid>
public partial class SampleUC : RibbonGroup
{
public SampleUC()
{
InitializeComponent();
}
}
Now you can use it like that
<Ribbon>
<RibbonTab Header="Tab1">
<l:SampleUC/>
</RibbonTab>
</Ribbon>

Unable to get vertical scroll bars in an WPF TextBlock

I'm presenting text in a wpf TextBlock control (.Net 3.5). The content of the textblock varies depending on what the user selects in a list box. The text wraps, so I don't need an horizontal scroll bar. However, there is often more text than the amount the window can display, so I need a vertical scroll bar.
As I started searching I quickly found that the answer is to wrap the TextBlock in a ScrollViewer. However, It Does Not Work (TM) and I'm hoping someone can help me work out why.
This is the structure of the UI code:
<Window x:Class=..>
<StackPanel>
<ListBox HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</StackPanel>
</Window>
When the user selects an item in the list box, some text associated with this item is presented in the TextBlock. I would have thought that the code as it stands should have been all that's required, but it never provides me with a scroll bar.
Searching and experimenting have given me two clues: the root of the problem might be related to me updating the content of the TextBlock dynamically, and that the TextBlock does not resize itself based on the new content. I found a posting that seemed relevant that said that by setting the Height of the TextBlock to its ActualHeight (after having changed its content), it would work. But it didn't (I can see no effect of this).
Second, if I set the height (during design time) of the ScrollViewer, then I do get a vertical scroll bar. For instance, if I set it to 300 in the xaml above, the result is almost good in that the window as first opened contains a TextBlock with a vertical scroll bar when (and only when) I need it. But if I make the window larger (resizing it with the mouse during runtime), the ScrollViewer does not exploit the new window size and instead keeps its height as per the xaml which of course won't do.
Hopefully, I've just overlooked something obvious..
Thanks!
Because your ScrollViewer is in a StackPanel it will be given as much vertical space as it needs to display it's content.
You would need to use a parent panel that restricts the vertical space, like DockPanel or Grid.
<DockPanel>
<ListBox DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button DockPanel.Dock="Top" Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</DockPanel>

PopUp in Silverlight is not being clipped by container control

Simple, yet frustrating issue here...
I have a PopUp control.
It is contained in side a Grid, which has a Grid.Clip defined.
The PopUp is still visible outside the Grid's clipped area.
i.e.
<Grid Background="Red" Width="150" Height="150">
<Grid.Clip>
<RectangleGeometry Rect="0,0,150,150" />
</Grid.Clip>
<Popup IsOpen="True" Margin="100,100,0,0">
<Grid Background="Green" Width="150" Height="150" />
</Popup>
</Grid>
Ideally, the green box should not appear or "bleed" outside of the red box. The problem is that it is contained within a PopUp, and so it bleeds. How can I modify this (without removing the PopUp control) so that the PopUp does not bleed outside of it's containing control?
Popup works differently. It "ignores" its parent and it is added directly into visual root of your app. This is how it can be on-top of everything.
So now it depends on what are you trying to do. I think popup is not suitable for this scenario.
You can try to clip the popup in its template, but I feel that's not what you want.

Scrollbar in Listbox not working

I have a ListBox that displays a list of WPF controls.
My problem is that the vertical scrollbar is show but is disabled even when there are enough items that the ListBox should be scrollable.
One other possibly relevant fact is that this is contained in an Integration.ElementHost.
WPF noobie, Jim
Here is the XAML for the ListBox:
// for brevity I removed the Margin and Tooltip attributes
<Grid x:Class="Xyzzy.NoteListDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Name="stackPanel" Orientation="Vertical"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<CheckBox Name="AllRecent" IsChecked="False" >View All Recent</CheckBox>
<CheckBox Name="AscendingOrder" IsChecked="False">Descending Order</CheckBox>
<Button Name="btnTextCopy" Click="btnCopyText_Click">Copy All</Button>
</StackPanel>
<ListBox Name="NoteList"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
</StackPanel>
</Grid>
And the XAML for the control displayed in each ListBox item:
<UserControl x:Class="Xyzzy.NoteDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Name="Heading" FontSize="10">Note Heading</TextBlock>
<Button Name="btnCopyText" Height="20" FontSize="12"
Click="btnCopyText_Click">Copy
</Button>
</StackPanel>
<TextBlock Name="Body" FontSize="14">Note Body</TextBlock>
</StackPanel>
</Grid>
</UserControl>
I have had problems with scroll bar visibility when using a StackPanel. I think it is because the StackPanel is always as big as it needs to be to contain all of its children. Try reorganizing the layout to remove the StackPanel (use a Grid instead) and see if that helps.
You just need to introduce Height property, like this:
<ListBox Height="200"
Name="NoteList"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
Heya, I suspect what might be happening is that your ListBox is expanding enough for every item however the ListBox is actually disappearing off the bottom of the Containing Control.
Does the ListBox actually stop properly or does it just seem to disappear? Try setting a MaxHeight on the ListBox and see if that makes the scrollbar appear. You should be able to set the VerticalScrollBarVisibility to Auto to have it only appear when needed.
If the list box is inside a StackPanel, try these steps for your ListBox
Set ScrollViewer.VerticalScrollBarVisibility="Auto"
Setting the Height property of a ListBox to some height that you expect to see.
That should force the scroll bar to show up.
This is pretty late, but anyone using ListBox probably shouldn't have it in a StackPanel. Once I switched the parent control of my Listbox from StackPanel to DockPanel with LastChildFill=True (Where the listbox was the last control), my scrollbar worked perfectly.
Hope this helps someone who's problem was not solved by the above answer.
Another solution to this problem that works well is to put a ScrollViewer around the StackPanel.
Another solution with a modification to Dave's is to use the ScrollViewer only. You only be able to scroll by placing your mouse on the ScrollView's ScrollBar. I use it this way because I don't like how ListBox jumps from item to item and sometimes missing items from the Top. Little bit hard on the eyes too. I like ScrollViewer's smooth scrolling.
I just ran into the same issue, and here's a little code demo on code project that visually shows it.
(If you want to save yourself the time of writing the code to see the differences yourself :) )
http://www.codeproject.com/Tips/659066/ListBox-and-Panels-in-WPF

WPF SplitButton? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I've just spent a very frustrating afternoon trawling Google looking for a commercial-grade WPF SplitButton control that will work in a ToolBar. A SplitButton is one where you can click on the main part of the Button to take a default action, or click on a little triangle on the right to get a drop-down menu of alternate actions).
I found several on the web (including the one on CodeProject, and including the two on CodePlex). None of them work properly in a ToolBar--they either don't appear at all, or they don't have toolbar button styling. I even looked at some commercial offerings, like ActiPro's pop-up button (in their SharedLibrary DLL). Same problems.
And yes, I've seen all the posts about how easy it is to create one. It's very easy to create a bad one, but not so easy to create one that looks and works like the SplitButtons in Outlook or Visual Studio, where the drop-down menu doesn't disappear if you release the mouse button.
So, here's my question: Are there any commercial-grade SplitButtons out there, either open-source or commercial, that work in toolbars? I'm not looking for a control that is part of a $1,500 annual subscription to somebody's controls library, but if there is a reasonably-priced SplitButton, I'd sure like to find it.
The only true "commercial-grade" split button that I know of is the one by Syncfusion, which is included as part of their ribbon controls (although it works outside of the ribbon as well).
That being said, I remember this implementation as being fairly usable and complete, if you're looking for something free.
Another good free implementation that seem to have it all:
http://huydinhpham.blogspot.com/2008/09/wpf-drop-down-and-split-button.html
The split button can be used in the toolbar and has a proper toolbar style. It can also be restyled if you want.
Dropdown menu is exposed via its own property - i.e splitbutton can have it's own context menu separate from the dropdown one (even though it seems illogical it can be useful in some cases - like toolbar context menu that pops up when you right click on a button placed in the toolbar).
The dropdown menu is standard ContextMenu - i.e. content can be databound, menu items restyled etc.
Both the main and the dropdown parts of the split button have command properties associated with them.
The Extended WPF Toolkit Community Edition (which is free) has a nice SplitButton (and it has a DropDownButton as well)
<xctk:SplitButton Content="Click Me">
<xctk:SplitButton.DropDownContent>
<xctk:ColorCanvas />
</xctk:SplitButton.DropDownContent>
</xctk:SplitButton>
I don't know what exactly you are looking for in a split button, but this video on how to create one is pretty complete and makes a splitbutton that is just about perfect.
http://windowsclient.net/learn/video.aspx?v=3929
I know you didn't want a tutorial, but I've used this before and you couldn't tell the difference between it and the ones in outlook.
There is a pretty good split button implementation for WPF and Silverlight over Delay's blog:
Banana SplitButton (A WPF-specific fix for SplitButton and some code analysis improvements for the Silverlight version, too)
I think what you mean is called a DropDownButton.
There is a boolean property on MenuItem "StaysOpenOnClick" which could solve your problem.
I was looking for the same and just rolled my own (you will need to style to your liking (to match the ToolBar) and you could refactor it / convert it into a custom control ... etc.)
<StackPanel x:Name="Split" Orientation="Horizontal">
<Button Command="{Binding MainCommand}">
<StackPanel>
<Image Source="{StaticResource MainCommandImage}"/>
<TextBlock>MainCommand</TextBlock>
</StackPanel>
</Button>
<Separator HorizontalAlignment="Left" Width="1" VerticalAlignment="Stretch" Margin="0,5"/>
<CheckBox Width="16" IsThreeState="False">
<Grid>
<Path Fill="Black" Data="{StaticResource DownArrowGeometry}"
Stretch="Uniform" Height="6" Width="6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Popup x:Name="popupOptions" AllowsTransparency="True" PopupAnimation="Fade" StaysOpen="False"
Placement="Bottom" PlacementTarget="{Binding ElementName=Split}" HorizontalOffset="-3"
IsOpen="{Binding RelativeSource={RelativeSource AncestorType={x:Type CheckBox}, AncestorLevel=1}, Path=IsChecked}">
<StackPanel>
<StackPanel>
<Image Source="{StaticResource SubCommandImage1}"/>
<TextBlock>SubCommand1</TextBlock>
</StackPanel>
<StackPanel>
<Image Source="{StaticResource SubCommandImage2}"/>
<TextBlock>SubCommand2</TextBlock>
</StackPanel>
</StackPanel>
</Popup>
</Grid>
</CheckBox>
</StackPanel>
Using the WPF Toolkit split button to show a context menu is reasonably straight forward. Add a context menu in your window resources. On the window load - bind the context menu to the split button and then use the context menu as you would do normally.
It really needs to be added in the WPF Toolkit as the majority use case for this button is to replicate the old WinForm Splitt button.
<Window x:Class="SplitButtonTesting.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:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ContextMenu x:Key="contextMenu" IsOpen="{Binding IsOpen}">
<MenuItem Header="One" />
<MenuItem Header="Two" />
<MenuItem Header="More...">
<MenuItem Header="One" />
<MenuItem Header="Two" />
</MenuItem>
</ContextMenu>
</Window.Resources>
<DockPanel>
<Menu DockPanel.Dock="Top" x:Name="ApplicationMenu">
<xctk:SplitButton x:Name="SplitButton" Content="Main Button" DropDownContent="{x:Null}" />
</Menu>
<Border />
</DockPanel>
Code behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
namespace SplitButtonTesting
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
SetupSplitButton();
}
public void SetupSplitButton()
{
var menu = this.Resources["contextMenu"] as ContextMenu;
menu.PlacementTarget = SplitButton;
menu.Placement = PlacementMode.Bottom;
menu.DataContext = SplitButton;
}
}
}

Resources