I have a windows phone application.
Whenever I set a buttons visibility to collapse and I make it visible again I have to click on it twice to get it to fire the command it binds to. How can I make it fire after the first time again? It does not even hit any code at all on the first time. Both the visibility and button command is set through binding it to the view model properties.
I guess you are using MVVM light?
If so I had some similar problem when I used ICommand. If you instead only use the build-in relay command, then that solved the problem for me.
I think the problem comes from a "focus" issue. I suspect that the focus is confused by the change in visibility. The first click is then used to restore the focus.
To avoid this problem, I force the focus to be on the button just after changing the visibility
private void RequestDialogBoxEvent(object sender)
{
this.DialogBox.Visibility = System.Windows.Visibility.Visible;
this.buttonOK.Focus();
}
with the XAML for the dialog box:
<Border x:Name="DialogBox" Background="Black" Grid.Row="1" Visibility="Collapsed" >
<Grid Margin="0,20" VerticalAlignment="Center" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Confirm ?" />
<Button x:Name="buttonOK" Content="OK" Grid.Row="1" Click="Button_Click" />
</Grid>
</Border>
Related
I am working on a project that dynamically loads text into a Text Box control. The problem is that, for some reason, the text does not seem as if it can be selected. I do not understand why as I thought that, by default, the text in a Text Box was selectable. Why is this and how can I fix it? Here is my XAML:
<Window x:Name="viewWindow" x:Class="Games_Database.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="View" Height="300" Width="600" Loaded="windowLoad" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="77*"/>
<RowDefinition Height="13*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="57*"/>
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Width="550" Margin="21,5,21,10" Grid.RowSpan="2" IsManipulationEnabled="True">
<TextBox x:Name="text" HorizontalAlignment="Center" Margin="5,0,0,0" TextWrapping="Wrap" VerticalAlignment="Center" IsHitTestVisible="False" Height="Auto" Width="500" Grid.RowSpan="2" ScrollViewer.CanContentScroll="True" FontSize="14" FontFamily="Times New Roman" IsInactiveSelectionHighlightEnabled="True" Text="" AutoWordSelection="True" />
</ScrollViewer>
</Grid>
Any help would be greatly appreciated. Thanks much in advance!
The text cannot be selected because you have IsHitTestVisible="False".
If you remove that attribute, the text box will once again be able to respond to mouse clicks from the user. Note that, with your current code, you can get the cursor inside the text box by pressing the tab key.
It's beacause you have IsHitTestVisible property set to false. Setting this property to false means that control will not respond on any mouse events. However you are still able to enter the control by using tab.
Perhaps this blog post will make it more clear to you.
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.
Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.
Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.
It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.
I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.
An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.
So is there any way to do this?
Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander IsExpanded="True">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Height="50" Text="Hello" />
</Border>
</Expander>
<Expander Grid.Row="1" IsExpanded="True">
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock Height="50" Text="World" />
</Border>
</Expander>
</Grid>
regular tree view can do what you ask.
see this wonderful code-project explanation:
http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF
WPF Expander component do exactly what you want and it push down other control if hosted in a proper panel. Try using a StackPanel for example.
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
I have a small user control that contains some Xaml markup that includes a TextBox. When the control is selected, I automatically set focus on the TextBox. However, when the user clicks on any other element (such as a border) the focus is removed from the TextBox.
For example,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Blue" IsHitTestVisible="False" />
<TextBox Grid.Row="1" />
<TextBlock Grid.Row="2" Text="Something" IsHitTestVisible="False" />
</Grid>
Clicking either the Rectangle or the TextBlock causes the TextBox to lose focus.
What's the best way to retain focus on the TextBlock? I feel I'm missing something simple.
The click is probably going through the grid and giving focus to whatever is under it.
Try setting Background="Transparent" on the <Grid>
The only solution I found was to rebuild the Xaml surrounding the control in question so that custom control incorporated everything that I wanted to not affect the the focus of the text box. And then put a handler on the mouse event to ensure that the TextBox retained focus.
I was not happy with the solution but couldn't think of anything else.
( I did try to handle the LostFocus event and determine if the mouse was still the user control, but gave up with that route when I had to continually keep track of the mouse location ).