How to get Tap event on Hub section Header?
<HubSection.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="" Foreground="#009CDE" Width="250"/>
<Image x:Name="SendToSap" Source="image/Sync_To_SAP.png" Width="40" Height="40" Margin="5,0,50,0" Tapped="SendToSap_Tapped"></Image>
</StackPanel>
</DataTemplate>
</HubSection.HeaderTemplate>
private void SendToSap_Tapped(object sender, TappedRoutedEventArgs e)
{
}
How to get this on image tap event?
Is it not working as is? Maybe you need to set IsTapEnabled="True"
If you need to add more code behind in your DataTemplate - usually you can move all the contents of the template into a UserControl and handle the events there.
Related
In WinUI3 it seems that you are unable to modify the duration of a tooltip (similar to how WPF allowed a duration change with the ToolTipService.ShowDuration).
As such, I'm attempting to replicate the behavior using a Popup control such that the Popup will remain visible as long as the mouse is hovered over an element (utilizing the element's OnPointerEntered / OnPointerExited events to modify the IsOpen property of the Popup).
This displays the Popup correctly, however in my case the Popup exists inside a Grid which is inside the ListView.ItemTemplate for a ListView. ala:
<ListView>
<DataTemplate>
<Grid>
<TextBlock/>
<Popup/>
</Grid>
</DataTemplate>
</ListView>
Thus the popup only overlays the <Grid>, but still gets clipped within the region of the DataTemplate.
I'd like to have the popup overlay the <ListView> itself instead - is there a way to specify which content the popup will overlay such that it will overlay the <ListView>?
Or even better - to have it overlay all elements of the Window (replicating the placement of a tooltip?)
Is there a way to change the parent content for a popup in WinUI3?
Sure, you could place Popup at same level as ListView in current page. And listen ListView item PointerEntered and PointerExited event then pass current item datacontext to popup control.
Xaml
<ListView
Margin="0,10,0,45"
ItemsSource="{x:Bind Items}"
Visibility="Visible">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Vertical"
PointerEntered="StackPanel_PointerEntered"
PointerExited="StackPanel_PointerExited">
<TextBlock x:Name="Id" Text="{Binding ID}" />
<TextBox
x:Name="FirstName"
GettingFocus="FirstName_GettingFocus"
Text="{Binding FirstName}" />
<TextBox x:Name="LastName" Text="{Binding LastName}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Popup
x:Name="PopupTip"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Bottom" />
</TransitionCollection>
</Popup.ChildTransitions>
<StackPanel
Width="150"
Height="80"
Background="LightGray"
CornerRadius="4">
<TextBlock
x:Name="InfoLabel"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding ID}" />
</StackPanel>
</Popup>
Code behind
private void StackPanel_PointerEntered(object sender, PointerRoutedEventArgs e)
{
var ItemDataContext = (sender as FrameworkElement).DataContext;
PopupTip.DataContext = ItemDataContext;
PopupTip.IsOpen = true;
}
private void StackPanel_PointerExited(object sender, PointerRoutedEventArgs e)
{
PopupTip.DataContext = null;
PopupTip.IsOpen = false;
}
I have a canvas object in my xaml that has a togglebutton and two textblocks, like this.
<ListBox.ItemTemplate>
<DataTemplate >
<Canvas HorizontalAlignment="Right" VerticalAlignment="Top" Width="485"
Margin="-15,0,-15,80" Visibility="Visible"
MouseLeftButtonUp="MandantenStackPanel_MouseLeftButtonDown">
<ToggleButton Name="FavToggle" Checked="FavChecked" Unchecked="FavUnchecked"
Style="{StaticResource CustomToggleButtonStyle}"
Foreground ="White" BorderBrush="Red" HorizontalAlignment="Left"
Canvas.Left="0" Canvas.Top="0">
<ImageBrush ImageSource="/Icons/favs.png" Stretch="UniformToFill" >
</ImageBrush>
</ToggleButton>
<TextBlock Text="{Binding MandantenNummer}" FontSize="24"
TextWrapping="Wrap" Canvas.Left="90" Canvas.Top="20"/>
<TextBlock Text="{Binding MandantenBezeichnung}" FontSize="24"
TextWrapping="Wrap" Canvas.Left="90" Canvas.Top="50"/>
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
In my .cs i am binding a collection item to that listbox that also has a boolean called isFavorite that i'd like to toggle with my togglebutton. How can i access the data context from the canvas from inside my toggle event handlers? I tried it like i did it like i do it when you click on the textbox:
private void FavChecked(object sender, EventArgs e)
{
ClassX x = (sender as Canvas).DataContext as Class x;
x.isFavorite = true;
}
but that of course doesn't work cause my sender is the togglebutton and not the canvas. Can i access the canvas from here?
The sender is ToggleButton and not Canvas because that is the control on which you attached that event handler.
Also, DataContext is set recursively so ToggleButton inherits the same data context the parent has.
I am working with listview control in win8. I want to add an event when I hold on the item, and delete the item.
the xaml and event code like this:
<ListView x:Name="ImageList" VerticalAlignment="Bottom" Background="LightGray" Width="1050" BorderBrush="Black" BorderThickness="2" Grid.Column="1"
Holding="ListView_Hold1" SelectionChanged="OnSelectedChanged" SelectionMode="Single" Height="152" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemContainerStyle="{StaticResource ListViewItemStyle1}" Style="{StaticResource ListViewStyle1}">
<ListView.ItemTemplate>
<DataTemplate>
<Image Opacity="0.7" Width="150" Height="125" Stretch="UniformToFill" Source="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
private async void ListView_Hold1(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs e)
{...}
It seems that I can not get any information from holdingroutdEventArgs but the attribute of originalsource. But it is the image and no way access to iteml
I have found a relative question: "how to get the clicked item in the listview". it can be solved by getting the attribute of selecteditem.
anyone can help me ? give me some clue.
You should be able to get it from the HoldingRoutedEventArgs.OriginalSource.DataContext, in your case: (Assuming that the ListView.ItemSource is a list of ImageModel)
private async void ListView_Hold1(object sender, Windows.UI.Xaml.Input.HoldingRoutedEventArgs args)
{
var source = (FrameworkElement)args.OriginalSource;
var imageModel = (ImageModel)source.DataContext;
}
You can get the index of the item using the SelectedIndex property (but for these work you have to select, by pressing, and after hold the item)
int i = imageList.SelectedIndex;
So to delete the item you can use the RemoveAt() method
imageList.Items.RemoveAt(i);
I'm a beginner on windows phone 8 developpement, and I need to create a tabs system ( a little like slidingDrawer on Android).
I explain myself, i've implemented a xaml interface which look like this :
http://img15.hostingpics.net/pics/974529onglet.png
The code of this interface :
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50" Text="Qualité orale" Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension" Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Fichiers relatifs" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Le conférencier" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
</StackPanel>
What i want to do here is that when the user touch a stackpanel, the stackpanel change his colour and the gray content at the right change too.
Can you help me solve my problem ?
Thank you in advance
Simply add Tap attributes to the TextBlocks and handle the events from the code behind.
For example:
<TextBlock Text="Questions"
Foreground="White"
Tap="MyEventHandler"
/>
Then you would want to give Name attributes to your StackPanels so that you can reference it in your code. Like so:
<StackPanel Height="50" Name="QuestionsStackPanel">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
In the code behind file, visual studio may auto generate the method stub, if not it should look like this.
private void MyEventHandler(object sender, System.Windows.Input.GestureEventArgs e)
{
//Make changes here
QuestionsStackPanel.Background = Colors.Blue
}
From here you can change the colors of the specific tabs and the grey area you mentioned.
First, Just for informations, the "android tabs interface" is not in agreement with the "UI (metro)" interface. It's not very very important, for more information about a "Ui design style you can go here for styling your app :d
For your Problem, in your Xaml, you can add an event for detect the click (or other event in your 'TextBlock'.
For sample, you can add a "Tap Event" in all your button in your "Code.xaml" (also, You can add a "Name" attribute for find easily your control after):
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Name ="Global_Onglets" Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50"
Text="Qualité orale"
Name="TextBlock_Quality"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension"
Name="TextBlock_Comprehension"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général"
Name="TextBlock_General"
Tap="MyPersonalEvent"
Foreground="White"/>
</StackPanel>
</StackPanel>
</StackPanel>
And, in your "code.cs", you create your event method :
/// <summary>
/// Event handler called by Textblock Tap.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void MyPersonalEvent(object sender, EventArgs e)
{
// Get, the current textblock where called the event.
TextBlock CurrentTextBlock = sender as TextBlock;
// Check just the clicked textBlock, for attributes specific colors..
foreach (TextBlock textblock in Global_Onglets.Children)
{
if (textblock == sender)
{
// Attribute secific color for this tap textblock;
}
// Attribute a "normal" color for alls others textBlock..
}
}
You can have more details about events here!!
Also, I saw You create your app in French. But, You can easy Localized your application for create here in other languages (and distrube in other country...) if you want you've a great tutorial here about "localizing your app"... Better think before, that any duty again later. :D
If I add my DataTemplate from StandardStyles.xaml then the button event doesn't work. Here is my code:
StandardStyles.xaml
<DataTemplate x:Name="TestTemplate">
<Button x:Name="TestButton" Width="32" Height="32" Click="TestButton_Click"/>
</DataTemplate>
MyPage.xaml
<FlipView x:Name="flipView" ItemTemplate="{StaticResource TestTemplate}">
</FlipView>
MyPage.xaml.cs
private void TestButton_Click(object sender, RoutedEventArgs e)
{
Debug.WriteLine("EVENT WORKS!!");
}
If I click on the button nothing happens. All styles are loading correctly qua layout. When I add the template inside MyPage.xaml as page resource or directly inside the FlipView control then it works fine. For example, this works:
<!-- MyPage.xaml -->
<FlipView x:Name="flipView" >
<FlipView.ItemTemplate>
<DataTemplate x:Name="TestTemplate">
<Button x:Name="TestButton" Width="32" Height="32" Click="TestButton_Click"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Why is the event doesn't work when the template is loaded from outside of the page?