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.
Related
I am writing a WPF application using Infragistics package, which functionality requires opening new windows. One of the windows I open has 5 buttons on it. Buttons become highlighted when I focus on them. When I do not focus on any button, the first button is automatically in focus (it is highlighted like a focused button). I just want all the buttons have same style until I focus one of them.
I just didn't manage to find the solution.
Here is the part of code with the button
<DockPanel>
<ToolBarTray DockPanel.Dock="Top" IsLocked="True">
<ToolBar Name="toolBar" Band="1" BandIndex="1" BorderThickness="1" BorderBrush="LightSteelBlue">
<Button Name="button1" Click="button1_Click" BorderBrush="LightSteelBlue" Padding="3" IsEnabled="False" HorizontalContentAlignment="Left">
<StackPanel Orientation="Horizontal" >
<TextBlock VerticalAlignment="Center">Button 1</TextBlock>
</StackPanel>
</Button>
<Button HorizontalContentAlignment="Left" Margin="5,0,0,0" Name="button2" Click="button2_Click" BorderBrush="LightSteelBlue" Padding="5,3,5,3" ToolTip="Load and display debug data shot to check filtering process"
IsEnabled="False">
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center">Button 2</TextBlock>
</StackPanel>
</Button>
</ToolBar>
</ToolTray>
</DockPanel>
Now when I do not focus the mouse on any button, the button1 looks like it is focused. I want to look it as a button2.
I am trying to create a floating button in my WPF application. Currently, I have the following:
<Grid>
<Button Style="{DynamicResource MetroCircleButtonStyle}" Background="#E0E010" Width="50" Height="50" Name="testBtn" Click="testBtn_Click" Margin="374,184,93,35">
<Rectangle Height="20" Width="20" RenderTransformOrigin="0.47,0.456">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_add}" />
</Rectangle.Fill>
</Rectangle>
</Button>
<ListBox Width="200" Height="200" Name="lbox1" BorderBrush="Black" BorderThickness="5">
<Grid Width="175">
<ScrollViewer CanContentScroll="False" VerticalScrollBarVisibility="Auto" Margin="107,0,0,0"></ScrollViewer>
</Grid>
</ListBox>
</Grid>
which has a list box with a scroll viewer and a button outside the list box. When I click the button it prints "Hello World" in the list box. I would like to add the button inside the list box and as I scroll down inside the list box have the button be floating. Is there any way to do this?
Note: I am a complete beginner when it comes to WPF.
EDIT: Here is essentially what I want:
So going off of #omarmallat's comment, the way to do this is
<Button x:Name="addRowButton"
Width="50"
Height="50"
Margin="1275,330,25,25"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Background="#2EFF00" />
I had a margin so the button wasn't directly in the corner and provided a little but of space. Make sure the button tag is inside your grid tag!
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.
In my WPF application I have many text boxes on one page. I want to set focus on the first text box. I've Googled it and tried different solutions.
XAML Code :
<StackPanel Width="350" HorizontalAlignment="Left" >
<TextBlock x:Name="CustNamelbl" Text="C U S T O M E R N A M E"
Style="{StaticResource LightBoldTxtblkStyle }"/>
<Grid Height="35">
<TextBox x:Name="CustName" Style="{StaticResource Txtbox}"
LostFocus="CustName_LostFocus_1" TabIndex="1"
CommandManager.PreviewExecuted="CustName_PreviewExecuted"
ContextMenu="{x:Null}" PreviewTextInput="CustName_PreviewTextInput"
Margin="0,0,0,0" GotFocus="CustName_GotFocus"/>
<Rectangle Fill="White" Height="2" Opacity="0.2"
VerticalAlignment="Bottom"></Rectangle>
</Grid>
</StackPanel>
C# Code :
CustName.Focus();
Keyboard.Focus(CustName);
Using this code I am getting Focus on that TextBox. I'm also able to open system keyboard. However, I am not able to type anything in that TextBox. Also, that focused cursor is not a blinking cursor, but just a steady cursor.
Give your TextBox a name and then you can call in your Window-Tag
FocusManager.FocusedElement="{Binding ElementName=YOURTBNAME}"
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