How to Add ContextMenu to Button - xaml

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
}

Related

How to prevent inversion of color for nested Flyout in XAML?

My XAML code:
<Button Content="Show flyout">
<Button.Flyout>
<Flyout>
<StackPanel>
<Button Content="Button"/>
<Button Content="ShowSlider">
<Button.Flyout>
<Flyout>
<Slider Width="200"/>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
The nested Flyout appears with inverted color in the area intersected with the upper level Flyout:
How can I prevent this ?
Use of CommandBarFlyout works:
<Button Content="Show flyout">
<Button.Flyout>
<Flyout>
<StackPanel>
<Button Content="Button"/>
<Button Content="ShowSlider">
<Button.Flyout>
<CommandBarFlyout>
<AppBarElementContainer>
<Slider Width="200"/>
</AppBarElementContainer>
</CommandBarFlyout>
</Button.Flyout>
</Button>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>

How to reuse the combination of UI elements?

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>

Stretch my buttons in a TopAppBar

I am developing a universal application in Visual Studio 2015 Community, but I have a problem in stretching my 3 buttons when I test my application on local PC or the Windows phone emulator, this is what I get with my code:
<CommandBar Height="51" >
<CommandBar.Content>
<Grid>
<StackPanel>
<Image x:Name="image1" Margin="41,10,-168,-50" Source="images/name.png" RenderTransformOrigin="0.487,0.82"/>
<Image x:Name="image" Margin="1,0,-40,-50" Source="images/icon.png"/>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-244,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Button.Content>
<Image Source="images/home.png" Margin="-9,0.333,-9,-0.667"/>
</Button.Content>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-280,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/search.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
<StackPanel>
<Button Height="49" Margin="0,0,-315,0" Width="35" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Image Source="images/profil.png" Margin="-9,0.333,-9,-0.667"/>
</Button>
</StackPanel>
</Grid>
</CommandBar.Content>
This what I want to get:
This is going to get you there:
<!--Content Alignment is left by default!-->
<CommandBar HorizontalContentAlignment="Stretch">
<CommandBar.Content>
<Grid>
<!--Left element-->
<Rectangle Margin="10" Height="35" Width="35" Fill="Red"
HorizontalAlignment="Left"/>
<!--Right elements together in a horizontal StackPanel-->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
<Rectangle Margin="10" Height="35" Width="35" Fill="Red" />
</StackPanel>
</Grid>
</CommandBar.Content>
</CommandBar>
First up, you tagged your question inside several different area's, so it's difficult for us to tell what platform you are on. Is it a WinRT 8.1 app or a UWP windows 10 app?
But for reference, if it's a UWP Win10 app, first try to use following XAML, it creates a CommandBar with 1 primary command. And on the UWP platform that will position the icon at the right of the screen.
<CommandBar IsOpen="True" IsSticky="True">
<CommandBar.PrimaryCommands>
<AppBarButton Icon="Add" />
</CommandBar.PrimaryCommands>
</CommandBar>
More info on what and how items are displayed inside a commandbar can be found on MSDN here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.commandbar.aspx
There are a few issues with what you're trying.
The XAML you have is more complicated than it needs to be.
You've tried to align controls by setting margins - this doesn't work with
variable sized containers.
You're not using any of the functionality of the CommandBar so you probably don't need it.
Instead you can make the layout you desire with a simple grid.:
<Grid VerticalAlignment="Top" Height="51">
<StackPanel HorizontalAlignment="Left">
<Image x:Name="image1" Source="images/name.png" />
<Image x:Name="image" Source="images/icon.png"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button >
<Image Source="images/home.png" />
</Button>
<Button>
<Image Source="images/search.png" />
</Button>
<Button >
<Image Source="images/profil.png" />
</Button>
</StackPanel>
</Grid>

How to Determine ContextMenu Tapped Item

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;
}

How to show custom dialog from Callisto WinRT toolkit?

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;
}