Develop Reference

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.

Enlarging image in WPF

I have a WPF application which checks for new images in a certain parent directory, and if there are new images, it switches the currently displayed images (I have 6 images).
I would like to add a feature which will allow a user to click on one of the images, and upon that click, a 'new' window will appear, showing that image enlarged, and another click anywhere on the screen will quit this enlargement and put the focus back to the other (6) images.
Is that possible? I tried googling zoom image wpf but found only mouse-drag related solutions.
I also tried using viewport but that didn't to work so well either.
Update - XAML
<Grid Grid.Row="0">
<GroupBox x:Name="AccuracyGraphsGroupBox" Header="Accuracy" Foreground="Red">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPicBox" MouseUp="AccuracyPicBox_OnMouseUp"></Image>
<Image Grid.Column="1" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPerioPicBox" MouseUp="AccuracyPerioPicBox_OnMouseUp"></Image>
</Grid>
</GroupBox>
</Grid>

As the guys mentioned in the comments, your best bet is to use a ToolTip to popup your full size image. There is a slight problem with data binding the Image.Source value from the original Image in your ToolTip, because they are not part of the normal UI visual tree and exist in their own tree. However, we can overcome this by using the ToolTip.PlacementTarget property:
<Image Name="Image" Source="/WpfApplication1;component/Images/Tulips.jpg" Height="100"
Stretch="Uniform">
<Image.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget,
RelativeSource={RelativeSource Self}}">
<Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
<Image Source="{Binding Source}" Stretch="None" />
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
Of course, you could just use the same Binding Path in both Image.Source properties, but I never like repeating code.

Textbox in popup doesn't get focus in WPF application

I'm building a window for a kiosk application that has an admin screen to connect to a wifi network. Actually, I'm porting an existing WinForms app that already does this, but doesn't give us the flexibility we want to create a more interesting UI. So, we're moving to WPF.
The window is pretty straightforward, it has a listview to show networks that it finds, and if you click on one, it will connect to it. In order to connect, we need to prompt for the security code for that network if it needs one. To do this, we open a popup that has three sections - a "dialog-y" prompt section at the top, a spacer row, and a blank border that will sit behind an onscreen keyboard, but have nice rounded corners.
That top section has a header, a text box, and two buttons, connect and cancel. Again, nothing complex.
All this works. You click a network, we show the popup and the keyboard, except: the textbox for the passcode never gets the focus. Even if you click on it. No focus. The only trick I've found to get it to focus is to click off the popup (like back on the listview, which is already ignoring clicks if the popup is open, so it's safe), then click back on the textbox, and voila! focus. I really don't think I want to put that in a user manual though.
Here's the popup portion of the xaml:
<Popup x:Name="popPasscode" Placement="Top" HorizontalOffset="50" VerticalOffset="1000" AllowsTransparency="True" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="White" CornerRadius="20" Width="600" Height="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="#464646" Height="50" Margin="8,10,8,0" CornerRadius="25" >
<Label x:Name="lblTitleSecurityCode" Content="Enter the security code" Foreground="White" FontFamily="Arial" FontSize="30" FontWeight="Bold" HorizontalAlignment="Center"/>
</Border>
<TextBox Grid.Row="1" x:Name="tbPasscode" Height="50" FontFamily="Arial" FontSize="30" Margin="40,0,40,0"/>
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="10,0,10,10" HorizontalAlignment="Center">
<Controls:ImageButton x:Name="btnCodeConnect" Content="Connect" Height="70" Width="275" Foreground="Black" Style="{DynamicResource PlainButton}" FontFamily="Arial" FontSize="30" FontWeight="Bold" Click="btnCodeConnect_Click" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Controls:ImageButton x:Name="btnCodeCancel" Content="Cancel" Height="70" Width="275" Foreground="Black" Style="{DynamicResource PlainButton}" FontFamily="Arial" FontSize="30" FontWeight="Bold" Click="btnCodeCancel_Click" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Border>
<Border Grid.Row="2" x:Name="brdrKbd" Background="White" CornerRadius="20" Width="1200" Height="420"/>
</Grid>
</Popup>
Here's what I'm currently trying to do during the listview click event to get focus to the control. Note that I tried to fake the "set focus to the listview, then set it to the textbox, but that didn't work.
// set the popup location and width and keyboard border width based on the current screen width
popPasscode.IsOpen = true;
// open the on-screen keyboard - synchronous call, doesn't return until it's open and idle
FocusManager.SetFocusedElement(this, lvAvailNetworks);
tbPasscode.Focusable = true;
FocusManager.SetFocusedElement(popPasscode, tbPasscode);
I've tried a couple different things for the DependencyElement for tbPasscode, but I really have no idea what I'm doing, or that what I'm doing is making any difference. Oh, did I mention I just finished my first week of WPF coding? Yup, WPF newbie alert.
I saw this post, but it didn't help much, since I thought I was already doing all that.

Instead of MouseDown, register to MouseUp event on ListView/ListViewItem.
In the handler you can do
popPasscode.IsOpen = true;
Keyboard.Focus(tbPasscode);
The MouseUp on your ListView takes focus away from the Popup, so open your Popup in MouseUp instead of MouseDown

Bring Window Buttons to Front

I'm currently developing a Twitter application for Windows, similar to the Twitter client for OSX.
I'm using the Windows Shell Extensions library found here to make the entire window Aero, and be able to extend beyond the bounds of the designated window location.
I want the window buttons (Minimize, Maximize, Close) to be shown over top of the grid with the white background. This is a functionality that I thought would have been built into Windows, but apparently I'm wrong.
The two images below illustrate my point. In the second image, I want the window buttons to take precedence over the white-background grid, not the other way around like it's shown.
Is there some kind of code snippet or XAML-snippet that'll help me? Has anyone else ever had this problem before?

I stumbled upon a simple, yet dirty solution. I just made a path to go around the outside of the Windows buttons, and set the background of the outside to white, or whatever background color I was using. Then I just pieced rectangles together to make it look nice.
Here's the resulting code:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="0" Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="105" />
<ColumnDefinition Width="5" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="#FFFFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Path HorizontalAlignment="Stretch" Grid.Column="1" Stretch="Fill" VerticalAlignment="Bottom" Height="20" Fill="#FFFFFFFF" Data="M 0,4.11334L 4.008,4.11334C 1.792,4.11334 0,2.27332 0,0L 0,4.11334 Z M 140,4.11334L 135.957,4.11334C 138.192,4.11334 140,4.11334 140,0L 140,4.11334 Z " />
<Border Grid.Column="2" CornerRadius="0, 10, 0, 0" Background="#FFFFFFFF" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
And here's the resulting image:

you should hide your minimize maximize and close buttons and draw your own like described here.
http://winsharp93.wordpress.com/2009/07/21/wpf-hide-the-window-buttons-minimize-restore-and-close-and-the-icon-of-a-window/

How can I give a group of controls a single tooltip, and have it appear smoothly?

I have a grid of controls, where each editable control (checkbox, combobox, etc.) has an associated label. I want to share a tooltip between the label and its control.
Now this is something that I have accomplished by using BindableToolTips: I simply define the ToolTip in my XAML resources, and then set the same ToolTip object individually on the label and the control.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}"
Content="Example" />
Unfortunately, this doesn't make it appear smoothly... When the mouse is moved from the label to the control, or from the control to the label, the tooltip disappears and reopens, appearing to flicker. This occurs even when there is no gap between the label and control, and does not look good. This obviously occurs because they are two separate tooltips.
I would like to somehow group the label and its associated control, and have the tooltip appear on that single group; this way, it can appear fluidly and not flicker when the mouse is moved between the two. Unfortunately, I am struggling to do this. Here are some things I have tried...
Empty TextBlock with the tooltip applied and ColumnSpan=2.
Unfortunately, this prevents the control from receiving mouse clicks, as the TextBlock covers it up invisibly. I have tried setting IsHitTestVisible to false, but then that prevents it from receiving mouse over events, which stops the tooltip appearing at all. If I could just make it so that the mouse clicks through the empty TextBlock, but the TextBlock still gets mouse over events, then it would be perfect.
Code:
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}" />
Nested grid specifically for the one label and one control.
This method seems to work: the tooltip appears whenever the mouse is anywhere over the inner grid, and mouse events are still successfully passed to the control. Unfortunately, this has three problems:
It is very messy, as I will need many nested grids for every label/control combination.
The "Auto" column widths no longer take into account the widths of other controls in the outer grid, because this is of course a separate grid.
It seems to ignore the tooltip placement settings, which are Placement=Right and with PlacementTarget being the specific control. Instead, the tooltip appears underneath the inner grid.
If the last two problems could be fixed, then this would be an acceptable solution.
Code:
<Grid Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
ToolTipService.PlacementTarget="{Binding ElementName=ExampleControl}"
Utilities:ToolTipServiceExtended.BindableToolTip="{StaticResource ExampleControlTT}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Example label:" />
<CheckBox Grid.Row="0"
Grid.Column="1"
x:Name="ExampleControl"
Content="Example" />
</Grid>
Does anybody have any ideas for a good solution to this problem? I simply want my tooltips to appear over both the label and the associated control as though they are one element, without flickering when the mouse is moved between them all. That's all.

Just wrap the controls in a content presenter and attach the tooltip to that.
<Window x:Class="StackOverflowWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<ContentPresenter ToolTip="Blah">
<ContentPresenter.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Example label:"/>
<CheckBox Grid.Column="1" x:Name="ExampleControl" Content="Example" />
</Grid>
</ContentPresenter.Content>
</ContentPresenter>
</Window>