I have use the following code snippet to define the Popup.
Code snippet[XAML]:
<Grid Margin="0,0,0,0" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="19" />
<ColumnDefinition Width="19" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Stretch"
Text="HeaderText"
FontWeight="Bold"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"/>
<Grid Grid.Column="1">
<Button Width="19" x:Name="FilterButton" Click="FilterButton_OnClick" Content="^"/>
<Popup x:Name="FilterPanel" StaysOpen="False" >
<Border >
<Grid>
<TextBlock x:Name="tblTitle" Text="PopUp Header" Background="Red" Grid.Column="0" Grid.Row="0"/>
</Grid>
</Border>
</Popup>
</Grid>
<TextBox Text="Test" Grid.Column="2"/>
</Grid>
I have use the following code snippet to open the popup
Code snippet[C#]:
private void FilterButton_OnClick(object sender, RoutedEventArgs e)
{
this.FilterPanel.IsOpen = true;
}
Scenorio:
Open the popup using button click.
Press Tab.
Focus move to TextBox.
Actual Behavvior:
Popup does not close.
Expected Behavior:
Popup should be closed.
For your reference here I have attached the simple sample .Can you please any look into this and provide guidance to archive my requirement. Thanks in advance.
This is very strange. I took your code and pasted it in a new project window and popup closed every time. However I remember when I wanted to create my own custom control I had a similar issue. I know one of the things is to set StaysOpen to false. This I see you have already done. Another is try to setting the following when FilterPanel is initialized
FilterPanel.IsMouseCaptureWithinChanged +=FilterPanel_IsMouseCaptureWithinChanged;
void FilterPanel_IsMouseCaptureWithinChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if (!(bool)e.NewValue)
{ FilterPanel.IsOpen = false; }
}
As I said my code worked perfectly when I copied your code, so I couldn't test it, but the above should work.
Related
I knwow there are many other who wrote about this but the suggested solutions don't solve my problem.
I've got a sort of gallery and I need that when the user edits the number specified in the TextBox automatically the image is updated.
Initially I tried with LostFocus event, but it doesn't always fire as explained here.
If I bind the property as suggested here, I have too many events if the number has more than one digit.
Then I tried to do this, but it doesn't work.
This is how my TextBox is defined:
<TextBox Margin="2" Text="{Binding NImageShown}" FontSize="18"
LostFocus="ImageIndex_OnLostFocus"
Name="ImageIndex" Height="40" Width="60"
VerticalAlignment="Center" VerticalContentAlignment="Center"
Focusable="True">
</TextBox>
I implemented the third solution by attaching the window to MouseDown event:
<Window x:Class="...."
.....
MouseDown="Window_MouseDown"....>
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
if (ImageIndex.IsFocused)
Keyboard.ClearFocus();
}
With this solution I sawy that ImageIndex.IsFocused remains true even after Keyboard.ClearFocus(): this is the reason why I think that solution does not fix my problem.
Any help is really appreciate!
EDIT
Changes based on the suggestions:
<Grid Grid.Row="2" Grid.Column="2" Name="GridTextbox">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
.....
<StackPanel Grid.Column="2" Orientation="Horizontal"
HorizontalAlignment="Right">
<TextBox Margin="2" Text="{Binding NImageShown}" FontSize="18" LostFocus="ImageIndex_OnLostFocus"
Name="ImageIndex" Height="40" Width="60" VerticalAlignment="Center" VerticalContentAlignment="Center" Focusable="True"></TextBox>
<Label Style="{DynamicResource LabelStyle}" VerticalAlignment="Center"
Content="{Binding NTotalImages}" FontSize="18" Padding="5,0,5,0" Margin="5,5,5,5" />
</StackPanel>
</Grid>
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
if (ImageIndex.IsFocused)
{
GridTextbox.Focus();
Keyboard.ClearFocus();
}
}
Even with these changes, LostFocus doesn't fire.
SOLUTION
Change the xaml as suggested in this way and keep the code behind as written before:
<TextBox Margin="2" Text="{Binding NImageShown}" FontSize="18"
LostKeyboardFocus="ImageIndex_OnLostFocus"
KeyDown="ImageIndex_OnLostFocus"
Name="ImageIndex" Height="40" Width="60"
VerticalAlignment="Center" VerticalContentAlignment="Center"
Focusable="True">
</TextBox>
I want to set the focus automatically when "NumberEnterTextBox" lost the focus.
See my XAML code here:
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock VerticalAlignment="Center" Text="Nummer eingeben: "/>
<TextBox x:Name="NumberEnterTextBox" VerticalAlignment="Center" Width="200" HorizontalAlignment="Right" KeyUp="NumberEnterTextBox_KeyUp" TextChanging="NumberEnterTextBox_OnTextChanging"/>
</StackPanel>
<Viewbox x:Name="Viewbox" Grid.Row="1" HorizontalAlignment="Left">
<Image Source="{Binding GetImageSource, Converter={StaticResource Converter}}" Stretch="Uniform"/>
</Viewbox>
Well the thing is, I tried several variations of the following snippets in my codebehind that works fine with a normal WPF application:
NumberEnterTextBox.Focus(FocusState.Pointer);
NumberEnterTextBox.Select(0, 0);
So my question is simple: How can I set the focus to the NumberEnterTextBox from my codebehind?
Well I have a solution, but I have no idea why this works in my case only within a LostFocus event:
private void NumberEnterTextBox_OnLostFocus(object sender, RoutedEventArgs e)
{
NumberEnterTextBox.Focus(FocusState.Programmatic);
}
But thanks guys for your help!
I am currently working on Windows Universal Apps.In that there is requirement to show menu from left side when User clicks on menu icon. I want add a ListView inside it and handle the selectionchanged event based on user's selected item. Now, the problem with Flyout is that it opens like a popup on clicking the icon but what I actually want to do is it should come from left side of the window .For e.g in Gmail application of android. Please can anyone suggest how to achieve this. Please find below my code which I added in Flyout below:
<Image Source="ms-appx:///Images/menu_image.png"
HorizontalAlignment="Left"
Tapped="Image_Tapped"
Width="60"
Height="90"
Grid.Column="0"
VerticalAlignment="Center">
<FlyoutBase.AttachedFlyout>
<Flyout>
<Grid x:Name="SettingsPane"
Background="{StaticResource AppBackGroundColor}"
Grid.Row="0"
Width="380">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EdgeUIThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Margin="8">
<TextBlock Name="SidebarTitletxtblk"
FontSize="25"
TextWrapping="Wrap"
Style="{StaticResource BaseTextBlockStyle}" />
</StackPanel>
<ListView Grid.Row="1"
x:Name="LocationPickerList"
SelectionChanged="LocationPickTypeSelected"
Margin="0,10,0,0"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource LocationPickerListItemTemplate}"></ListView>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Image>
You can't override the Flyout's standard transition. If you want to apply something else then you can use a Popup instead and customize it however you'd like. To have it slide in from the left apply an EdgeUIThemeTransition (if it's short) or a PaneThemeTransition (if it's full height) with Edge=Left.
For example:
<Popup x:Name="flyoutPane" IsOpen="False" IsLightDismissEnabled="True"
Width="320" HorizontalAlignment="Left">
<Popup.ChildTransitions>
<TransitionCollection>
<!--<EdgeUIThemeTransition Edge="Left" />-->
<PaneThemeTransition Edge="Left" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="380" Height="{Binding ElementName=flyoutPane, Path=Height}" Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
<TextBlock Text="Grid contents here" />
</Grid>
</Popup>
And trigger it from your Button Click (your Image sounds like it should be a Button rather than using Tap, unless you have an alternate keyboard method - you can template off the button look while keeping the button semantics).
private void Button_Click(object sender, RoutedEventArgs e)
{
// Height is only important if we want the Popup sized to the screen
flyoutPane.Height = Window.Current.Bounds.Height;
flyoutPane.IsOpen = true;
}
If you're doing many of these you can create a custom control with an attached property similar to FlyoutBase.AttachedFlyout.
I've just made a simple app with a longlistseletor, which include an item and an button to delete this item. I think nothing is wrong but each time i delete 4 or 5 items from this list, app always close. Is it because of lack of RAM ?
btw, my english is bad, sorry :P
XAML code:
<phone:LongListSelector ItemsSource="{Binding ItemsIdea}">
<!-- item quick idea template-->
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid HorizontalAlignment="Stretch" Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="{StaticResource PhoneAccentBrush}"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding IdeaContent}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
</StackPanel>
<Button Grid.Column="2" Click="btDeleteIdea_Click" BorderThickness="0.0" VerticalAlignment="Top">
<Image Source="/Assets/Icons/cancel_small.png"/>
</Button>
</Grid>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
and the C# code:
private void btDeleteIdea_Click(object sender, RoutedEventArgs e) {
var button = (sender as Button).DataContext as IdeaViewModel;
if (button != null)
App.ViewModel.DeleteIdea(button);
}
The problem may be connected with some little bugs in LongListSelector (I'm not aware if they still exist in current version and the version you use).
Here you can find similar problem and the solution is to extend your LLS class. I had similar problem some time ago and this helped:
public class LongListSelectorExtension : LongListSelector
{
protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
{
try { return base.MeasureOverride(availableSize); }
catch (ArgumentException) { return this.DesiredSize; }
}
}
You can also look here where are some improvements to LLS code.
Maybe this will help.
To use your extension you will have to modify your XAML:
Add namespace of your project where the class is at the beginning where other xmlns are:
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:local="clr-namespace:Example"
Then you should be able to use your class in XAML file instead normal LLS:
<local:LongListSelectorExtension .../>
This doesn't actually describe what I mean, but I'll try to explain. I've been using C# for an year now and never touched WPF. Only recently I've realized how awesome it is and started using it. I'm now facing a problem.
I want to let the user know the password/username are incorrect, so instead of the old WinForms MessageBox I want to make it more pleasent. I thought about creating a grid that tints the application darker, and then I'll be able to show some text on it. However - how's that possible?... Do you have any nicer ideas to show a message for the application (not a popup)? Thanks.
You can create an UserControl with translucent background (like #33000000), and 3-row grid to show title, message and OK button, like bellow:
<UserControl x:Class="ApplicationNameSpace.MessageControl" ... >
<Grid Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFFFFF" MinHeight="100" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#EEEEEE">
<Label Content="Unable to Login" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1" Margin="10,20">
<TextBlock Text="Wrong username or password. Try again." HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Grid Grid.Row="2" Background="#EEEEEE">
<Button Content="OK" Width="80" Height="25" />
</Grid>
</Grid>
</Grid>
</UserControl>
To use, you can add the control at the end of your window, and change the visibility to Visible when needs to show it.
<Window x:Class="ApplicationNameSpace.MainWindow"
xmlns:local="clr-namespace:ApplicationNameSpace" ... >
<Grid>
...
<local:MessageControl Name="messageControl" Visibility="Collapsed" />
</Grid>
</Window>
You can also create a generic control that you pass to a show method the title and message content, like MessageBox show method. You can also add the user control element programmatically in the window in this method.
You can use the validation and the INotifyDataError which is on WPF 4.5 and you can show a nice message next to the textbox check this link for example