I am searching for this long time and i couldn't get it.
I have a Long list selector in my windows phone 8 project.
How can i manage the button event in each item in the data template? I need to get the selected item in that button event.
Code snippet shown below. Please help.
try this
// in your button click event type this code
var selectedValue = ((sender as Button).dataTemplate;
or
var selectedValue = ((sender as Button).dataTemplate as SbCaDd).AcNo;
If you want to access the dataContext then try this one.
XAML
<phone:LongListSelector Grid.Row="1"
Name="llsMsg"
LayoutMode="List"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<TextBlock Text="{Binding}"
Foreground="Black" />
<Button Content="View Details"
Width="200"
Click="Button_Click"/>
</Grid>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
C#
private void Button_Click(object sender, RoutedEventArgs e)
{
var dataContext = (sender as Button).DataContext;
var dataContext = (sender as Button).DataContext as YourDataModel;
}
Related
I'm searching internet for how to add context menu for ListView. So far I've found one that actually displays context
<ListView>
...
RightTapped="ContactsListView_RightTapped" >
...
<ListView.Resources>
<MenuFlyout x:Name="allContactsMenuFlyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="Edit" Text="Edit"/>
<MenuFlyoutItem x:Name="Remove" Text="Remove" Click="Remove_Click"/>
</MenuFlyout.Items>
</MenuFlyout>
</ListView.Resources>
...
</ListView>
private void ContactsListView_RightTapped(object sender, RightTappedRoutedEventArgs e) {
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
}
private void Remove_Click(object sender, RoutedEventArgs e) {
}
The problem is I'm not able to get item on which the context menu was displayed. Another issue is that the context menu is displayed also outside of list view item (e.g. on borders). And since the event that is triggered is RightTapped, I'm not sure if the context menu would be displayed on long click on mobile devices. I cannot test it because my emulators are not currently working. Since it should be universal windows app I was expecting some really easy and efficient way of creating context menus for ListView items.
The problem is I'm not able to get item on which the context menu was displayed.
For this problem, if you add data to the ListView like this:
<ListView RightTapped="ListView_RightTapped">
<x:String>First Item</x:String>
<x:String>Second Item</x:String>
<x:String>Third Item</x:String>
<x:String>Fourth Item</x:String>
<ListView.Resources>
<MenuFlyout x:Name="allContactsMenuFlyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="Edit" Text="Edit" />
<MenuFlyoutItem x:Name="Remove" Text="Remove" Click="Remove_Click" />
</MenuFlyout.Items>
</MenuFlyout>
</ListView.Resources>
</ListView>
You can get the item's context in the RightTapped event like this:
private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
var a = ((FrameworkElement)e.OriginalSource).DataContext;
}
In this scenario, "a" will directly get the string format content of clicked item.
If you add your data to ListView using DataTemplate like this:
<ListView RightTapped="ListView_RightTapped" ItemsSource="{x:Bind list}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding text}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Resources>
<MenuFlyout x:Name="allContactsMenuFlyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="Edit" Text="Edit" />
<MenuFlyoutItem x:Name="Remove" Text="Remove" Click="Remove_Click" />
</MenuFlyout.Items>
</MenuFlyout>
</ListView.Resources>
</ListView>
and usually when using DataTemplate, we add data by ObservableCollection like this:
private ObservableCollection<List> list = new ObservableCollection<List>();
public MainPage()
{
this.InitializeComponent();
list.Clear();
list.Add(new List { text = "Item 1" });
list.Add(new List { text = "Item 2" });
list.Add(new List { text = "Item 3" });
list.Add(new List { text = "Item 4" });
list.Add(new List { text = "Item 5" });
}
"List" class is quite simple here for test:
public class List
{
public string text { get; set; }
}
Then also we can get the DataContext in the RightTapped event:
private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
var a = ((FrameworkElement)e.OriginalSource).DataContext;
}
But this time, "a" is actually the 'List' object (please refer to the "List" class) inside the item, because the content of the item is now a 'List' object, not a string any more. So we can get the text property of this object like this:
private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
var content = a.text;
}
I think eventually you want to edit the content in the Button click event of the Flyout, you can do it for example like this:
private string content;
private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
content = a.text;
}
private void Remove_Click(object sender, RoutedEventArgs e)
{
foreach (var item in list.ToList())
{
if (item.text == content)
{
list.Remove(item);
}
}
content = "";
}
Another issue is that the context menu is displayed also outside of list view item (e.g. on borders).
Can you explain this? I can't quite understand it. You mean displaying the content for example in the Flyout? If so, I think the method above can solve this problem. If not, you can leave a comment, and I will see if this problem can be resolved.
And since the event that is triggered is RightTapped, I'm not sure if the context menu would be displayed on long click on mobile devices.
I think that "long click" event here indicates the Holding event like this?
private void ListView_Holding(object sender, HoldingRoutedEventArgs e)
{
ListView listView = (ListView)sender;
allContactsMenuFlyout.ShowAt(listView, e.GetPosition(listView));
var a = ((FrameworkElement)e.OriginalSource).DataContext as List;
content = a.text;
}
I just test it on the Mobile Emulator, it works fine. Although I wrote a quite long answer here, but the key point is quite simple, you can just use ((FrameworkElement)e.OriginalSource).DataContext to get the Context of the item.
Use Command instead of Click event. You can pass the clicked item in CommandParameter
<MenuFlyout x:Name="allContactsMenuFlyout">
<MenuFlyout.Items>
<MenuFlyoutItem x:Name="Edit" Text="Edit"/>
<MenuFlyoutItem x:Name="Remove" Text="Remove" Command="{Binding Path=DeleteItemTappedCommand}" CommandParameter="{Binding ElementName=ArchivedMessages_ListView, Path=SelectedItem}"/>
</MenuFlyout.Items>
</MenuFlyout>
Inside your ViewModel
public DelegateCommand<object> DeleteItemTappedCommand { get; set; }
public YourViewModel()
{
DeleteItemTappedCommand = new DelegateCommand<object>(DeleteItemClicked);
}
private void DeleteItemClicked(object obj)
{
// adjust object type to your templated source type
}
or for the CommunityToolkit.MVVM users:
[ICommand]
private void DeleteItemClicked(object obj)
{
// adjust object type to your templated source type
}
Add flyout in the datatemplate. Use command to deal with the events.
See sample code here:
<DataTemplate x:Name="ListItemTemplate" >
<Grid x:Name="gridItem" RightTapped="gridItem_RightTapped">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Name="imgProduct" Width="50" Height="50" Grid.Column="0" Source="{Binding ProductUrl}" Margin="0,5,10,5" VerticalAlignment="Center" ></Image>
<TextBlock Name="tbName" Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" ></TextBlock>
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Delete" Command="{Binding DataContext.DeleteCommand, ElementName=contentGrid}" CommandParameter="{Binding}" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
</Grid>
</DataTemplate>
Code behind:
private void gridItem_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);
}
You can get the full solution here: https://code.msdn.microsoft.com/How-to-implement-flyout-ef52517f
I've got a shared Flyout defined in my <Page.Resources> as follows:
<Flyout x:Name="InfoFlyout" Opened="{Binding IsOpen,
ElementName=MyListView, Mode=TwoWay}">
<Grid>
<Button Foreground="White" Margin="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Help"/>
</StackPanel>
</Button>
</Grid>
</Flyout>
But I get An object reference not set error when compiling, so I used the code from this article (Using Windows 8.1 Flyout control with MVVM) instead.
This seems to circumvent the problem I was having with the above code. Now my shared Flyout code looks like this:
<Flyout x:Name="InfoFlyout"
helpers:FlyoutHelpers.Parent="{Binding ElementName=MyListView}"
helpers:FlyoutHelpers.IsOpen="{Binding IsOpen, Mode=TwoWay}">
<Grid>
<Button Foreground="White" Margin="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Help"/>
</StackPanel>
</Button>
</Grid>
</Flyout>
My ListView control (i.e. x:Name="MyListView") is binded to the page's ViewModel i.e. MainPageViewModel. The IsOpen property is defined in the MainViewModel.
Now in my ListView DataTemplate, I want my Flyout to open when I press and hold the ListViewItem or when pressing a button within the ListViewItem:
<DataTemplate>
<Grid FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source={Binding MyImage} />
<Grid Grid.Column="1" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Width="30" Height="30"
Flyout="{StaticResource InfoFlyout}"
content="i">
</Button>
</Grid>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<actions:OpenFlyoutAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Grid>
</DataTemplate>
As you can see, I've got the Flyout "attached" to the Grid via:
FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}"
and I've got the same Flyout attached to the button within the ListViewItem itself via:
Flyout="{StaticResource InfoFlyout}"
I've put breakpoints on both my setter and getter for the IsOpen property and when page gets loaded, it does go into the getter but whenever I open or close my Flyout either via Holding or by pressing the 'i' button, it doesn't trigger the method below and therefore it doesn't change the IsOpen property.
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e) as defined in the FlyoutHelper class.
The reason I've set my ElementName to MyListView is that I want all my ListViewItem to be binded to the one property i.e. IsOpen as I need to detect whenever a flyout menu is opened irrelevant of which ListViewItem it belongs to.
How can I achieve or resolve this?
UPDATE - 1
The problem of accessing the shared menu has been resolved by using the following:
<Flyout x:Name="InfoFlyout"
helpers:FlyoutHelpers.Parent="{Binding ElementName=MyListView}"
helpers:FlyoutHelpers.IsOpen="{Binding IsOpen, Mode=TwoWay}">
and setting the button to
<Button Width="30" Height="30"
Command="{Binding InformationCommand}"
CommandParameter="{Binding}"
Flyout="{StaticResource InfoFlyout}">
Which is fine and as #ElvisXia mentioned, you can comment out the code in the OnIsOpenPropertyChanged as the positioning is already determined by the button located inside my ListViewItem.
There is however one outstanding problem. A small one btw, but nice if it can be solved. The shared flyout which is attached to the grid itself in the DataTemplate i.e.
<DataTemplate>
<Grid FlyoutBase.AttachedFlyout="{StaticResource InfoFlyout}">
It is being positioning based on the ListViewItem which technically is correct as I'm calling a different piece of code for that one i.e.
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<actions:OpenFlyoutAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
And the OpenFlyoutAction is defined as follows:
public class OpenFlyoutAction : DependencyObject, IAction
{
public object Execute(object sender, object parameter)
{
FrameworkElement senderElement = sender as FrameworkElement;
FlyoutBase flyoutBase = FlyoutBase.GetAttachedFlyout(senderElement);
flyoutBase.ShowAt(senderElement);
return null;
}
}
Can I somehow stop using the OpenFlyoutAction and use the same code as provided in the article to open my Flyout wherever the user is holding his/her finger on the relevant ListViewItem rather than on top or below the actual ListViewItem?
I understand it's a little bit side track from the original issue which was to share a Flyout by to controls but may as well finish it as it is somehow relevant to the issue.
Thanks.
Change the type of Parent from Button to ListView. To open flyout in particular X,Y position is not possible in WP. You can choose PopUp control instead. Here is a link which i got open the pop up in tapped position. You can use VisualTreeHelper to get PopUp control of tapped ListViewItem
By Using Windows 8.1 Flyout control with MVVM , the author use parent to control where the flyout shows up.
So the author have codes like below(FlyoutHelpers.cs):
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
var flyout = d as Flyout;
var parent = (ListView)d.GetValue(ParentProperty);
if (flyout != null && parent != null)
{
var newValue = (bool)e.NewValue;
if (newValue)
flyout.ShowAt(parent);
else
flyout.Hide();
}
}
He use flyout.ShowAt(parent) to let flyout show at parent element. But in your codes you have binded the flyout to the button using:
<Button Width="30" Height="30"
Flyout="{StaticResource InfoFlyout}" content="i">
</Button>
So it is not necessary to let it show at it's parent any more. To fix the problem, you can comment out the statements like below:
private static void OnIsOpenPropertyChanged(DependencyObject d,
DependencyPropertyChangedEventArgs e)
{
//var flyout = d as Flyout;
//var parent = (ListView)d.GetValue(ParentProperty);
//if (flyout != null && parent != null)
//{
// var newValue = (bool)e.NewValue;
// if (newValue)
// flyout.ShowAt(parent);
// else
// flyout.Hide();
//}
}
Then you will see the flyout shows at the right place.
I have the following XAML code for Windows Phone 8.1 (non SilverLight):
<Grid>
<ToggleButton Name="TogBtn" VerticalAlignment="Center" HorizontalAlignment="Center" Checked="ToggleButton_OnChecked">
<SymbolIcon Symbol="play"></SymbolIcon>
</ToggleButton>
</Grid>
The output of the above code is:
How can I change the icon to a stop icon when the toggle button is checked and then back to play icon when unchecked?
I thought this would be easy to find through Google, but apparently not.
Please change your XAML to this:
<Grid>
<ToggleButton x:Name="TogBtn" HorizontalAlignment="Center" VerticalAlignment="Center" Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked">
<SymbolIcon Symbol="Play"></SymbolIcon>
</ToggleButton>
</Grid>
And please add this to your .cs file:
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
TogBtn.Content = new SymbolIcon(Symbol.Stop);
}
private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
TogBtn.Content = new SymbolIcon(Symbol.Play);
}
That should do the job!
is it possible to get a watermarks passwordbox in WinRt? It is no problem to get a textbox with a watermark, but I don't know a toolkit where I can get a password box with a watermark.
How can I implement one for myself?
Take a look on WinRT XAML Toolkit.
They also have
WatermarkTextBox
WatermarkPasswordBox
By yourself you can implement your own controls:
in .xaml:
<Border x:Name="brdPassword" Margin="5,0,5,10" BorderThickness="2" BorderBrush="White" CornerRadius="5" Grid.Row="0"
Background="White" Height="50" VerticalAlignment="Stretch">
<Grid>
<TextBox x:Name="PasswordWatermark" TextWrapping="Wrap"
Text="Watermark" Foreground="#FFC4C4C4" IsHitTestVisible="False"
Background="{x:Null}" BorderThickness="0" Padding="0,-10"
FontSize="26.667" />
<PasswordBox x:Name="pbPassword" LostFocus="PasswordLostFocus"
GotFocus="PasswordGotFocus" Background="{x:Null}"
FontSize="26.667" Margin="0,-12,0,-9" VerticalAlignment="Center"
BorderThickness="0" Opacity="0" />
</Grid>
</Border>
in .cs
private void PasswordLostFocus(object sender, RoutedEventArgs e)
{
CheckPasswordWatermark();
}
private void CheckPasswordWatermark()
{
var passwordEmpty = string.IsNullOrEmpty(pbPassword.Password);
PasswordWatermark.Opacity = passwordEmpty ? 100 : 0;
pbPassword.Opacity = passwordEmpty ? 0 : 100;
}
private void PasswordGotFocus(object sender, RoutedEventArgs e)
{
PasswordWatermark.Opacity = 0;
pbPassword.Opacity = 100;
}
Hope it's help
I don't think we can put watermark in the Password control.
You can put a TextBox with wartermark in the same row and same column with the Password control, then handle the two controls' GotFocus and LostFocus events to make the control Visible or Collapsed.
There is no toolkit yet which provides watermarked password box. However this may help:-
http://code.msdn.microsoft.com/windowsdesktop/Watermarked-TextBox-and-444ebdec
Also, check out http://julmar.com/blog/mark/?p=300 for both a Textbox and PasswordBox implementation for WinRT.
I have a combobox in datagrid.I use Silverlight 4.0 and MVVM.
My code works fine,unless when I removed a record from datagrid and add another one, the SelectedValue binding for combobox in added row doesnt work.
<sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Items, Mode=TwoWay}" Name="dataGrid2" >
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Width="50*">
<sdk:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding Path=Products, Mode=OneWay}"
SelectedValue="{Binding Path=ProductId,Mode=TwoWay}"
DisplayMemberPath="ProductTitle"
SelectedValuePath="ProductId"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellEditingTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
Thanks
Found this piece of code on some site, it helped me in a similar Situation:
public class ComboBoxEx : ComboBox
{
protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
var bindingExpression = GetBindingExpression(SelectedValueProperty);
base.OnItemsChanged(e);
if (bindingExpression != null)
{
var binding = bindingExpression.ParentBinding;
SetBinding(SelectedValueProperty, bindingExpression.ParentBinding);
}
}
}