Develop Reference

Flyout does not show content

I am using the Mah.MetroApps package for my WPF application, In the XAML-file I define the flyoutControl, which is activated when a button is clicked.
The problem is, that it shows the flyout without the content e.g. a textblock.
So am I doing something wrong here?
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout x:Name="ActiveUserFlyout" Header="Active Users" Position="Right" Width="300" IsOpen="{Binding FlyoutIsOpen}"/>
<TextBlock FontSize="30">Stackoverflow</TextBlock>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>

You have to put the TextBlock inside the flyout e. g.
<controls:FlyoutsControl>
<controls:Flyout x:Name="ActiveUserFlyout"
Width="300"
Header="Active Users"
IsOpen="{Binding FlyoutIsOpen}"
Position="Right">
<TextBlock FontSize="30">Stackoverflow</TextBlock>
</controls:Flyout>
</controls:FlyoutsControl>

Open popup at the location of the button clicked

I am trying to create a popup that opens similar to the window preview option in Windows 8 taskbar. Basically, when I click or hover on a button, it opens a popup with basic information just above the button. Here is an example.
Right now, I am able to open the popup at either the extreme left or extreme right side of the page, using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons in the button bar, so I cannot set the fixed margin. I am trying to set the same in code but I am unable to get the absolute position and convert it to margin property. I am not sure, if there is a better solution either.
Edit:
Tried using popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Never mind. I am an idiot. Instead of setting IsOpen property, I set the visibility. :(
It works perfectly, although, I had to copy the whole design from the separate page to this one. Still better than nothing. Only problem now is if I click on something else, I will have to write code to make sure popup is closed.

You can use a Popup control, coupled with it's Placement property to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside your Popup, you can place your UserControl or any content element which will act as the popup's content.
See here for further information on popup placements, and here for a tutorial on WPF Popup controls.

Think about using ContextMenu, and set it's content you whatever you want. Thats is the solution for you.

This is how i defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can user from the code behind on a button click or something :
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False" let's you close the PopUp when clicking somewhere else.

WPF NotifyIcon - Hide Tray Popup

I'm currently using the (awesome) third party WPF NotifyIcon
I've created a Tray Popup like so:
<tb:TaskbarIcon Name="tbIcon" IconSource="/Images/Icon.ico" PopupActivation="LeftOrRightClick" TrayMouseDoubleClick="tbIcon_TrayMouseDoubleClick">
<tb:TaskbarIcon.TrayPopup>
<Border Background="White" BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Width="auto" Height="auto">
<DockPanel VerticalAlignment="Top" HorizontalAlignment="Right">
<Button DockPanel.Dock="Left" Name="btnSetupTray" Content="Setup" Margin="5" Width="70" Click="btnSetupTray_Click"></Button>
<Button DockPanel.Dock="Left" Name="btnExitTray" Content="Exit" Margin="5" Width="50" Click="btnExit_Click"></Button>
</DockPanel>
</Border>
</tb:TaskbarIcon.TrayPopup>
</tb:TaskbarIcon>
I'm wondering how I can hide the tray popup programatically.
I've tried setting the tray popup visibility:
tbIcon.TrayPopup.Visibility = Visibility.Collapsed;
which doesn't actually draw focus from the popup, meaning I have to double click another window to action something (like a button). It also means I have to set the visibility to Visible after focus has been drawn away from the popup.
Any help would be greatly appreciated!

try
tbIcon.TrayPopupResolved.IsOpen = false;

Try to use IsOpen instead of Visibility property. It is weird, but is has setter which actually closes the popup.
tbIcon.TrayPopup.IsOpen = false;
Hope it helps.

How can I create custom dropdown menu

I am new to WPF. I want to create a dropdown menu similar to this image. I am not getting from which control should I start the implementation of ControlTemplate.
I guess It is a Hyperlink with a ContextMenu.

WPF Popup control is exactly what you are looking for:
<Popup Name="myPopup" IsOpen="True">
<Label Name="myLabel" Content="Language: English"
Background="Black" Foreground="White"/>
<...other controls you like.../>
</Popup>

How do I make a WPF popup draggable using a thumb?

I've searched long and hard to find an example of this on the net. I've seen the alternative methods for this but I want to specifically use a thumb. In trying to hash out a solution I've been unable to get the functionality right/working as I'm fairly new to WPF. I'd be grateful if someone could give an example of how you may implement the above.
Cheers

A Popup doesn't give you an obvious way to move it; you can only place it relative to its placement target. However it does give you and additional offset relative to the placement target and that's enough to move it anywhere.
Here's a working markup-only solution that demonstrates a draggable Popup using a Thumb using Markup Programming. There is a text box that has a popup that pops up when the text box receives the keyboard focus. The popup has some text and a thumb.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:p="http://markupprogramming.codeplex.com/markup/programming"
Height="300" Width="300">
<Grid>
<StackPanel>
<TextBox x:Name="textBox1" Width="200" Height="20"/>
</StackPanel>
<Popup Name="popup" PlacementTarget="{Binding ElementName=textBox1}"
IsOpen="{Binding IsKeyboardFocused, ElementName=textBox1, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<TextBlock Background="White" Text="Sample Popup content."/>
<Thumb Name="thumb" Width="20" Height="20"/>
</StackPanel>
<p:Attached.Operations>
<p:ScriptHandler Path="#FindElement('thumb').DragDelta">
#AssociatedObject.HorizontalOffset += #EventArgs.HorizontalChange;
#AssociatedObject.VerticalOffset += #EventArgs.VerticalChange;
</p:ScriptHandler>
</p:Attached.Operations>
</Popup>
</Grid>
</Window>