I have a StackPanel that holds buttons, and I have added a ContextMenu so that each item may be pinned to the start screen by selecting that MenuItem. How might I determine on the Tap event which button has been selected?
MainPage.xaml
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" Click="1_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/1.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" Click="2_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/2.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile3" Height="173" Width="173" Margin="12,0,0,0" Click="3_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/3.png"/>
</Button.Content>
</Button>
</StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
Edit**
Place the ContextMenu individually for each button.
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" Click="1_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/1.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" Click="2_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/2.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
<Button x:Name="Tile3" Height="173" Width="173" Margin="12,0,0,0" Click="3_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/3.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="ContextMenu">
<toolkit:MenuItem Header="pin to start" Tap="ContextMenuItem_Tap"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
</StackPanel>
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
var menuItem = (MenuItem) sender;
var ctxMenu = (ContextMenu) menuItem.Parent;
var tileButton = (Button) ctxMenu.Owner;
}
Related
In my UWP xaml file, I need to reuse the StackPanel like below in the below ScrollViewer code, how to do it?
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
...
<ScrollViewer
Width="1920"
Height="1020"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
...
</StackPanel>
</ScrollViewer>
Create a UserControl and define the StackPanel there:
<UserControl
x:Class="App1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<StackPanel Orientation="Vertical">
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
<Button Content="button1" Style="{StaticResource buttonStyle}">
</Button>
</StackPanel>
</UserControl>
You can then create several instances of your UserControl in your ScrollViewer:
<ScrollViewer
Width="1920"
Height="1020"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<local:MyUserControl1 />
<local:MyUserControl1 />
<local:MyUserControl1 />
</StackPanel>
</ScrollViewer>
I'm trying to add Buttons to my Scrollviewer, my result so far is negative, scrollviewer will not work. I tried wrapping around stackpanels but no luck. Can anyone guide me in the right direction? Thanks,
<ScrollViewer Name="flippy" Grid.Row="1" >
<Grid Width="Auto" Height="Auto" MinWidth="1366" MinHeight="668" Name="GridA" Grid.Row="1">
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.png" Stretch="None" />
<StackPanel Height="150" Width="Auto" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal">
<Button Content="button1" HorizontalAlignment="Left" VerticalAlignment="Center" Height="180" Width="179" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/storA.png"></ImageBrush>
</Button.Background>
</Button>
<Button Content="button2" HorizontalAlignment="Right" VerticalAlignment="Center" Height="140" Width="121" Margin="10">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/litenA.png"/>
</Button.Background>
</Button>
</StackPanel>
<StackPanel Height="103" Width="557" VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal">
<Button Content="button3" HorizontalAlignment="Center" VerticalAlignment="Center" Height="103" Width="553">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png"/>
</Button.Background>
</Button>
<Image Source="ms-appx:///Assets/Pics/Alfabetet/Appelsin.fw.png" />
</StackPanel>
</Grid>
</ScrollViewer>
I have the following code:
<ListBox x:Name="FavList">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Button x:Name="PlayPause" Style="{StaticResource IconButton}" HorizontalAlignment="Left" Margin="2,2,0,2" Width="72" Click="PlayPause_Click" BorderThickness="0">
<ImageBrush x:Name="PlayPauseImage" ImageSource="Assets\Images\Play.png" />
</Button>
<TextBlock x:Name="myStreamName" Margin="84,8,8,0" TextWrapping="Wrap" Text="{Binding Name, FallbackValue='Test'}" Height="29" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>
<TextBlock x:Name="myStreamDescription" Margin="84,37,8,8" TextWrapping="Wrap" Text="{Binding About, FallbackValue='Testing'}" FontSize="16"/>
<TextBlock x:Name="myStreamURL" Text="{Binding URL}" Visibility="Collapsed" />
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="DeleteFavorite" Header="{Binding Path=LocalizedResources.DeleteFavButton, Source={StaticResource LocalizedStrings}}" Click="DeleteFavorite_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When I have the MenuItem Header equal to what I have there now, I keep getting invalid XAML errors. When I just put in header="Delete" Everything is fine.
Any ideas why this is happening?
I have a StackPanel of a few buttons, which are themed to look like tiles. Each will have the ability to be pinned to the Start screen. I would like to add a ContextMenu to each to enable this functionality. How might I do this? Also, how do I determine the tapped item?
MainPage.xaml
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" Click="1_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/1.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" Click="2_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/2.png"/>
</Button.Content>
</Button>
<Button x:Name="Tile3" Height="173" Width="173" Margin="12,0,0,0" Click="3_Click" Style="{StaticResource ButtonStyle1}" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/3.png"/>
</Button.Content>
</Button>
</StackPanel>
Since you created those Button's manually -I mean not generated using DataTemplate or so-, you need to add ContextMenu for each of them manually too.
...
<Button x:Name="Tile1" Height="173" Width="173" Margin="12,0,0,0" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/IconicTileSmall.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Pin To Start" Click="MenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
<Button x:Name="Tile2" Height="173" Width="173" Margin="12,0,0,0" toolkit:TiltEffect.IsTiltEnabled="True">
<Button.Content>
<Image Source="/Assets/Tiles/IconicTileSmall.png"/>
</Button.Content>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Pin To Start" Click="MenuItem_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Button>
...
But at least, there is a way to reuse method that handle MenuItem's click event:
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
var menuItem = (MenuItem) sender;
var ctxMenu = (ContextMenu) menuItem.Parent;
var tileButton = (Button) ctxMenu.Owner;
//Next: pin corresponding tileButton to start
}
My question is just like that. How should I show the CustomDialog control from Callisto toolkit? I have the following xaml:
<controls:LayoutAwarePage
x:Name="pageRoot"
x:Class="HeronClientWindowsStore.Views.SuggestEventDialogPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HeronClientWindowsStore.Views"
xmlns:controls="using:HeronClientWindowsStore.Controls"
xmlns:callisto="using:Callisto.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
</Page.Resources>
<callisto:CustomDialog
x:FieldModifier="public"
x:Name="suggestEventDialog"
Width="300" Height="500"
Title="Suggest an Event"
Background="Teal"
BackButtonVisibility="Visible">
<StackPanel>
<TextBlock
Margin="0,0,0,8"
Text="Suggest an event that should be added to Heron."
FontSize="14.6667"
FontWeight="SemiLight"
TextWrapping="Wrap" />
<TextBlock
Margin="0,0,0,8"
FontSize="14.6667"
FontWeight="SemiLight"
Text="Event URL" />
<callisto:WatermarkTextBox
HorizontalAlignment="Left"
Watermark="http://www.example.com"
Width="400"
Height="35" />
<StackPanel
Margin="0,20,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Content="OK" Width="90" Margin="0,0,20,0" />
<Button Content="CANCEL" Width="90" />
</StackPanel>
</StackPanel>
</callisto:CustomDialog>
It doesn't show and I can't see any Method for triggering it.
You have to use IsOpen property to open the dialog.
I am pasting here the working code for me.
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Show Dialog" Click="btnShowDialog_Click" />
<callisto:CustomDialog
x:FieldModifier="public"
x:Name="suggestEventDialog"
Title="Suggest an Event"
Background="Teal"
BackButtonVisibility="Visible"
BackButtonClicked="suggestEventDialog_BackButtonClicked_1">
<StackPanel>
<TextBlock
Margin="0,0,0,8"
Text="Suggest an event that should be added to Heron."
FontSize="14.6667"
FontWeight="SemiLight"
TextWrapping="Wrap" />
<TextBlock
Margin="0,0,0,8"
FontSize="14.6667"
FontWeight="SemiLight"
Text="Event URL" />
<callisto:WatermarkTextBox
HorizontalAlignment="Left"
Watermark="http://www.example.com"
Width="400"
Height="35" />
<StackPanel
Margin="0,20,0,0"
HorizontalAlignment="Right"
Orientation="Horizontal">
<Button Content="OK" Width="90" Margin="0,0,20,0" />
<Button Content="CANCEL" Width="90" />
</StackPanel>
</StackPanel>
</callisto:CustomDialog>
</Grid>
C#
private void btnShowDialog_Click(object sender, RoutedEventArgs e)
{
suggestEventDialog.IsOpen = true;
}
private void suggestEventDialog_BackButtonClicked_1(object sender, RoutedEventArgs e)
{
suggestEventDialog.IsOpen = false;
}