For some reason, child Expanders (placed in a StackPanel inside of another Expander), when collapsed or expanded, cause the parent Expander to raise its Expanded or Collapsed events.
Anyone know why this is or how I can change it? I'm only interested in the parent's events.
Here is some test XAML:
<Expander Header="Outer" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
<StackPanel>
<Expander Header="Inner1">
<Canvas Height="100" Width="100" Background="Blue" />
</Expander>
<Expander Header="Inner2">
<Canvas Height="100" Width="100" Background="Red" />
</Expander>
</StackPanel>
</Expander>
and here is the code-behind:
private void Expander_Expanded(object sender, RoutedEventArgs e)
{
MessageBox.Show("expanded");
}
private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
MessageBox.Show("collapsed");
}
When you run this, if you expand the parent, you get an "expanded" messagebox, as you'd expect. But when you then expand one of the children, you get the messagebox again.
The documentation for the Expanded event says:
The Expanded event occurs when the IsExpanded property changes from false to true
But clearly the IsExpanded property isn't changing on the parent Expander.
Why is this happening, any ideas?
Those events are routed and bubble up in the tree, if you want to prevent the parents from handling the event and thus reacting to it, set e.Handled to true in the child expander's event handler.
Edit: Instead of preventing the event from being raised you also could just restrict the code-execution in the handler to the case when the actual expander where the handler is attached raised the event. You can do this by wrapping everything in an if-block which executes if sender == e.OriginalSource.
(Woo, 10k...)
Related
Alright, I'm fairly new to WPF and I ran into a very strange problem. The relevant section of my XAML defines a Border around a ScrollViewer around a StackPanel which is populated using an ItemsControl that is then databound to a CollectionViewSource which in turn wraps a standard ObservableCollection. The ItemsControl defines a DataTemplate that contains only one tag: a custom control I've made called a StackElement. I'm handling three events from this control — MouseEnter, MouseLeave, and PreviewMouseLeftButtonUp. These events can fire, but do so unreliably.
For example, after some new StackElements are added, the MouseEnter event generally doesn't fire on the first StackElement until I've moused over a few others. Once a MouseOver manages to fire once, it continues to fire correctly on that StackElement from there on out.
However, the first time mousing over a StackElement doesn't always fail. If I approach the StackElements from beneath and try the last one first, it will always fire. When I do this, sometimes the first one will work, but the second one won't fire. Once, both of them did manage to operate correctly, but it happens infrequently.
I'm not multithreading anything, none of my parent controls handle events of their own, all event handlers consist only of a WriteLine() statement for debugging purposes, and the StackElement code-behind isn't handling any events either.
I've tried decoupling the ItemsControl from the CollectionViewSource in favor of binding it directly to the ObservableCollection, which did nothing other than (as I expected) bypass the sorting functionality I added to the ViewSource. I tried handling the events in the StackElement class itself, in addition to making them be tied to other controls contained within StackElement. I tried using DataTriggers, which if I remember worked as expected, but I need to include more advanced logic such as multiselection and the inability to lightly highlight an already-selected StackElement.
For context, I'm intending to use these events to lightly highlight StackElements when the user drags the mouse over them and to strongly highlight them when the mouse is pressed — basically, I need something that looks and feels like Windows File Explorer. From what I've seen this can't be accomplished in an elegant fashion with DataTriggers alone.
Here's my event handlers (in MainWindow.xaml):
private void StackElement_OnPreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("OnPreviewMouseLeftButtonUp fired for a StackElement.");
}
private void StackElement_OnMouseEnter(object sender, MouseEventArgs e)
{
Console.WriteLine("OnMouseEnter fired for a StackElement.");
}
private void StackElement_OnMouseLeave(object sender, MouseEventArgs e)
{
Console.WriteLine("OnMouseLeave fired for a StackElement.");
}
Here's how I'm adding to the bound collection (for testing, which is why it's hooked up to a random button):
private void Btn_File_PreviewMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
InitiativeStackElement t = new InitiativeStackElement(new Entity("TestName", 10, 11, 12, 13, null)); //InitiativeStackElement implements INotifyPropertyChanged so the databindings work
_entityProvider.Elements.Add(t); //_entityProvider is just a reference to a XAML-defined resource class, which is loaded up in the constructor so I don't have to call TryGetResource() whenever I want to use it. it's currently used for testing purposes only
}
Finally, here's the portion of my XAML containing the StackElements:
<Border Grid.Row="1"
Margin="0,1,0,0"
Style="{StaticResource StandardBorder}">
<ScrollViewer Name="Scv_InitiativeStack">
<StackPanel Name="Stp_InitiativeStack">
<ItemsControl Name="Its_InitiativeStack" ItemsSource="{Binding Source={StaticResource SortedInitiativeStack}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<con:StackElement Element="{Binding}" PreviewMouseLeftButtonUp="StackElement_OnPreviewMouseLeftButtonUp" MouseEnter="StackElement_OnMouseEnter" MouseLeave="StackElement_OnMouseLeave"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</Border>
The StackElement class just defines a single DependencyProperty of type InitiativeStackElement. The properties of this object are bound to a few controls within the StackElement, which always displays correctly. It's the behavior of the events that have me confused.
As described, I'm expecting the MouseEnter event to fire whenever the mouse is dragged onto the StackElement. However, it's only firing after I fulfill seemingly random conditions that shouldn't affect it's functionality, like mousing over another StackElement first. There are no error messages.
Alright, I was able to get the functionality I wanted using ListBox:
<Window.Resources>
<DataTemplate x:Key="InitiativeStackTemplate">
<con:StackElement Element="{Binding}"/>
</DataTemplate>
</Window.Resources>
<Border Margin="0,1,0,0"
Grid.Row="1"
Style="{StaticResource StandardBorder}">
<ScrollViewer Name="Scv_InitiativeStack">
<ListBox Name="Lbx_InitiativeStack"
SelectionMode="Extended"
ItemsSource="{Binding Source={StaticResource SortedInitiativeStack}}"
ItemTemplate="{StaticResource InitiativeStackTemplate}"
HorizontalContentAlignment="Stretch"/>
</ScrollViewer>
</Border>
Everything works as expected.
I want to show a simple flyout menu on a gridviewitem. According to this article here: https://blogs.msdn.microsoft.com/winuiautomation/2016/01/01/ten-questions-on-programmatic-accessibility/, (paragraph 6) you should be able to just set up a handler for the doubletapped event. I also tested it in the windows phone ui.
The problem is that ,in my app, the doubletap handler never gets called when doing the 2-finger double-tap gesture while narrator is activated.
I tried to do this in my gridview:
<GridView x:Name="ImgGrid"
ItemsSource="{x:Bind AllFiles, Mode=OneWay}"
IsItemClickEnabled="True"
SelectionMode="None"
Background="{ThemeResource PaneBackgroundBrush}" Padding="8"
ItemClick="ImgGrid_ItemClick"
ItemContainerStyle="{StaticResource GridViewItemContainerStyle}"
IsDoubleTapEnabled="True"
DoubleTapped="ImgGrid_DoubleTapped">
As you can see, the doubletapped flag is enabled and there's a handler attached for the doubletapped event. But it doesn't get called with the 2-finger double tapped gesture. However, on non-mobile devices, the handler gets called by rightclicking on a gridview item.
I also tried to put the eventhandler on the gridviewitem itself:
<DataTemplate x:DataType="data:KNFBFileInfo">
<Grid x:Name="ThumbnailContainer"
Margin="8"
Width="80"
Background="Transparent"
MinHeight="100"
Height="Auto"
Holding="ThumbnailContainer_Holding"
RightTapped="ThumbnailContainer_RightTapped">
Same result as the first thing i tried...
It's really a shame that it's so hard for a developer to make
his app accessible
I just created a sample app with MenyFlyout inside DataTemplate
<DataTemplate x:Name="LastItems">
<Grid RightTapped="Grid_RightTapped">
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Item1"/>
<MenuFlyoutItem Text="Item2"/>
<MenuFlyoutItem Text="Item3"/>
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Text="{Binding ''}" Padding="10" Margin="10,0" />
</Grid>
</DataTemplate>
And then Grid_RightTapped method is as follows.
private void Grid_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (element != null) FlyoutBase.ShowAttachedFlyout(element);
}
Doing this, When I Right Click on Non-Mobile Devices and LongPress on Items on Mobile Devices, Flyout Shows up with no issues.
There is an official document about the "Narrator". When we Double-tap with one finger, or Hold with one finger and tap with a second, it will activate primary action. It means we tap the item once without the "Narrator". So the DoubleTapped event will never be fired.
When we Double-tap with two fingers, it will show the context menu of the select control. We should be able to add the RightTapped to the GridView. When we Double-tap with two fingers, the RightTapped will be fired.
It seems we can not select the GridViewItem in the "Narrator" mode. If we add the SelectionChanged event to the GridView, when we double tap the GridViewItem, the SelectionChanged will never be fired.
I have my groupbox defined inside a window as follows
<ScrollViewer>
<Grid Name="gridMain">
<GroupBox x:Name="grp" Header="Group" Margin="0,71,0,0">
<Grid Margin="0,69,0,0" x:Name="gridmain">
<CheckBox x:Name="ChkShow" Content="Hide Controls" IsChecked="True" Checked="ChkShow_Checked" Unchecked="ChkShow_Unchecked" Margin="27,52,76,38"></CheckBox>
<Label x:Name="lblUsername" Content="Username" Margin="21,10,107,68" Visibility="Hidden"></Label>
</Grid>
</GroupBox>
</Grid>
</ScrollViewer>
This is my code to show/hide the control
private void ChkShow_Unchecked(object sender, RoutedEventArgs e)
{
lblUsername.Visibility = Visibility.Hidden;
}
private void ChkShow_Unchecked(object sender, RoutedEventArgs e)
{
lblUsername.Visibility = Visibility.Visible;
}
But I am unable to find the control it is getting as null so how can I over come this issue
It's all about order.
The CheckBox is created first. The event handlers are attached and the value is set to True. The event handler fires and tries to call the not-yet-created Label. Hence the Label is having the value null.
If you move the label to above the CheckBox it does work. It will also work if you would attach the event handlers later on, for example in the OnLoad method.
I faced a same issue.
Actually checkbox event fire before label control initialize.
So you need to check first control is initialized first, means control not equal to null.
Or you can directly set visibility using binding(need bool to visibility converter) or you can set visibility using data trigger.
<Label x:Name="lblUsername" Content="Username" Margin="21,10,107,68" Visibility="{Binding path=IsChecked, ElementName=ChkShow, Converter={StaticResource converter}}"></Label>
Here is link for bool to visible converter http://wpftutorial.net/ValueConverters.html
I'm developing a windows phone 8.1 app in XAML and C#. I have a ListView getting its Items from a bound list and displaying them through a DataTemplate. Now, in this DataTemplate there are multiple child elements, and when the user taps on an item in the list, I want to be able to determine what child element he actually touched. Depending on that, the app should either expand a view with more details inside the Item, or navigate to another page.
The ItemClick event handler of the ListView is ListView_ItemClick(object sender, ItemClickEventArgs e), and I thought e.OriginalSource would maybe give me the answer, but this just gave me the clicked ListItem.
I have yet to try if encapsulating the children with buttons and intercepting their click events would work, but I'm happy to try any alternative there might be for this.
I just found the solution myself. I set the ListView to SelectionMode="None" and IsItemClickEnabled="False", and then I added Tapped handlers for the individual child elements. Works just as I wanted.
I've got a TextBlock and an Image in one ListViewItem and have just used the Image_PointerPressed event. Doing that also fires the ItemClick event for the ListView so I disable it first, do the stuff I want, then re-enable the ItemClick event so that still fires when the TextBlock is pressed.
Code behind:
private async void imgDone_PointerPressed(object sender, PointerRoutedEventArgs e)
{
// disable click event so it won't fire as well
lvwCouncils.IsItemClickEnabled = false;
// do stuff
MessageDialog m = new MessageDialog("User Details");
await m.ShowAsync();
// Re-enable the click event
lvwCouncils.IsItemClickEnabled = true;
}
Xaml:
<ListView x:Name="lvwCouncils" ItemClick="lvwCouncils_ItemClicked" IsItemClickEnabled="true" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock
Grid.Column="1"
Text="{Binding council_name}"
FontSize="24"
Margin="10,10,30,10"
/>
<Border Height="20" Width="20" Margin="10,10,0,10" >
<Image x:Name="imgDone"
Source="Assets/user_earth.png" Stretch="UniformToFill" PointerPressed="imgDone_PointerPressed"/>
</Border>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Use the SelectionChanged event.
Cast the sender object to ListView type and then retrieve the item from the SelectedItem property.
Similar question here but for a different control :
Get the index of the selected item in longlistselector
Problem
When I click on a ListView item, it calls the "Tapped" event to navigate to another page. I have an Up Vote event within the ItemTemplate and when they call that specific event, I DO NOT want to call the ListView's tapped event. Any idea how I might do that?
ListView XAML:
Parent event, "listboxFeedbackItem_Tapped", occurs anytime any part of the listview is clicked
<Grid x:Name="gridMainData" Grid.Row="2">
<ProgressBar x:Name="prgBar" IsIndeterminate="True" VerticalAlignment="Top" Visibility="{Binding Path=FeedbackVM.IsLoading, Mode=TwoWay}"/>
<ListView ItemTemplate="{StaticResource FeedbackTemplate}" ItemsSource="{Binding FeedbackVM.FeedbackCollection}" Tapped="listboxFeedbackItem_Tapped"/>
</Grid>
ItemTemplate Xaml:
Event "UpVoteItem_Tap" should not trigger "listboxFeedbackItem_Tapped"
<DataTemplate x:Key="FeedbackTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,30,0" Text="{Binding UpVotes}" Tapped="UpVoteItem_Tap"/>
</StackPanel>
</DataTemplate>
Perhaps there's a method in C# to prevent subsequent events from occurring?
Thanks, I'm still trying to wrap my head around XAML.
When you receive the UpVote tapped event, you can tell it not to pass the event to the parent listview by setting e.Handled=true:
void UpVoteItem_Tap(object sender, TappedRoutedEventArgs e)
{
// Processing here
...
// don't send event to parent
e.Handled = true;
}