I want to add a contextual menu to a button from the appBar(bottom appBar). My min SDK is Windows 8.0. I would like something like this popup from MSDN:
Unfortunately I cannot use MenuFlyout since it is available only from Windows 8.1+, so I want to achieve this menu in another way. If you know how it can be done, please tell me.
Below is my bottom bar:
<common:LayoutAwarePage.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0" DataContext="{Binding}">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditQuote_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="RemoveQuote_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddQuote_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource HelpAppBarButtonStyle}"/>
</StackPanel>
</Grid>
</AppBar>
You should take a look at the Flyout Settings sample at:
http://code.msdn.microsoft.com/windowsapps/Settings-Flyout-eceaafea
Or if you are targeting Windows 8.1, flyouts have become much easier, check the MenuFlyout element:
http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx#menuflyout
I would look at the Callisto library on Nuget. It's built by Tim Heuer who's one of the guys working on the xaml team at Microsoft and fills in some of the gaps in the 8.0 control set. It includes a Menu Flyout control that looks not that coincidentally like the controls added in 8.1.
The samples app in the project includes an example of what you're looking for (a Menu Flyout from an App Bar).
Edit: If you're targeting Windows 8.1 with your project then the Menu Flyout control is now built into the platform.
Related
I am currently working on a Splitview Control which contains some menu options in SplitView Pane and a Grid in SplitView Content section. When the split view pane is opened its content gets hidden. Is it possible to move that slightly left like the following screenshot?
My basic split view implementation is
<SplitView x:Name="OptionsSplitView" OpenPaneLength="200" PanePlacement="Right"
DisplayMode="Overlay">
<SplitView.Pane>
<ListView x:Name="OptionsList"
Margin="10,10,0,0"
Grid.Row="1"
VerticalAlignment="Center"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource OptionsListItemTemplate}"
SelectionChanged="OptionsList_SelectionChanged">
</ListView>
</SplitView.Pane>
<SplitView.Content>
<Grid/>
</SplitView.Content>
</SplitView>
Please suggest is it possible to customize split view as per screenshot?
Bingo,
You can achieve it by just setting Right Margin of content whenever Pane Open or close.
Do refer Below link to get pane open & close event.
(Windows 10 UWP) SplitView.PaneClosed event is available but not for PaneOpened
Change your Splitview DisplayMode option to CompactInline or CompactOverlay as per your requirement
I am trying to change the context of a button inside a DataTemplate, but in my code-behind I can't acses it. What am I doing wrong?
Here is the XAML I am using:
<Grid>
<Hub>
<HubSection>
<DataTemplate>
<Grid>
<Button x:Name="THEbutten" Content="Button" HorizontalAlignment="Left" Margin="186,230,0,0" VerticalAlignment="Top"/>
</Grid>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
Your Button is inside a DataTemplate, and therefore it is in a different context than the page and not accessible from it's codebehind.
Consider the following options:
Modify your Buttons Properties using Data Binding.
Create a UserControl for your HubSections Content.
Sadly, the Hub Control is fairly hard to understand and use for beginners, because of this DataTemplate.
Here are some tutorials:
Mikaelkoskinen - Getting started
DotNetCurry - The Windows 8.1 Hub Control
There are also several questions around here on that topic:
How to access controls within hubsections
I am adding a WINFORM chart to my WPF project using
System.Windows.Forms.Integration.WindowsFormsHost
I am trying to work around the "airspace" rendering issue where the host is always rendered as the top most element the window. The workaround I am using sets
IsRedireced = "true"
When I insert this into my XMAL code:
<Grid x:Name="ssCurveChartGrid" Grid.Column="1" Margin="110,30,160,306" Grid.ColumnSpan="4" RenderTransformOrigin="0.479,0.186">
<WindowsFormsHost IsRedirected =" "true">
</WindowsFormsHost>
</Grid>
or my code behind:
System.Windows.Forms.Integration.WindowsFormsHost host =
new System.Windows.Forms.Integration.WindowsFormsHost();
host.IsRedirected = "true";
I get the following error:
The property 'IsRedirected' was not found in type 'WindowsFormsHost'
Here is a screenshot:
Can anyone help explain why this is happening? I relay need to display an element on top of my WINFORM chart!
Thanks
EDIT:
Code was taken from MSDN site: http://msdn.microsoft.com/en-us/library/ms752027.aspx
From MSDN:
"By default, visible WindowsFormsHost elements are always drawn on top of other WPF elements, and they are unaffected by z-order. To enable z-ordering, set the IsRedirected property of the WindowsFormsHost to true and the CompositionMode property to Full or OutputOnly.
To see the default z-order behavior"
"Copy the following XAML into the Grid element."
<!-- Z-order demonstration. -->
<Canvas Grid.Row="1" Grid.Column="1">
<WindowsFormsHost Canvas.Top="20" Canvas.Left="20" Background="Yellow">
<wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
</WindowsFormsHost>
<Label Content="A WPF label" FontSize="24"/>
</Canvas>
Press F5 to build and run the application. The WindowsFormsHost element is painted over the label element.
"To see the z-order behavior when IsRedirected is true"
Replace the previous z-order example with the following XAML.
XAML
<!-- Z-order demonstration. -->
<Canvas Grid.Row="1" Grid.Column="1">
<WindowsFormsHost IsRedirected="True" CompositionMode="Full" Canvas.Top="20" Canvas.Left="20" Background="Yellow">
<wf:Button Text="Windows Forms control" FlatStyle="Flat"/>
</WindowsFormsHost>
<Label Content="A WPF label" FontSize="24"/>
</Canvas>
Press F5 to build and run the application. The label element is painted over the WindowsFormsHost element.
Microsoft .NET Framework 4.5 Beta Readme
1.3.10 Windows Presentation Foundation (WPF)
1.3.10.1 HwndHost feature has been removed from WPF in the .NET Framework 4.5 Beta
The .NET Framework 4.5 Developer Preview included a WPF HwndHost redirection feature. However, this feature had several known issues and has been removed from the .NET Framework 4.5 Beta. It will not be included in any future releases.
To resolve this issue:
No workaround is available.
(emphasis added)
Which .Net Framework are you using here. IsRedirected for WindowsFormHost is released with Framework 4.5
I'm having a problem with the listpicker (SelectionMode="Multiple"!!!). When i go to fullmode it doesnt show "done", "cancel" icons like if the images were not in my project.
On full screen mode i only have this xaml code
<DataTemplate x:Key="listPickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="30" Height="40" FontFamily="Segoe WP"/>
</StackPanel>
</DataTemplate>
<toolkit:ListPicker Header="Floral" SelectionMode="Multiple" FullModeHeader="Floral" CacheMode="BitmapCache" x:Name="floralListPicker" Margin="0,0,12,0" ItemTemplate="{StaticResource listPickerItemTemplate}" FullModeItemTemplate="{StaticResource listPickerFullModeItemTemplate}"/>
Code is ok, everything works fine but the icons doesn't show, actually it shows as the default app bar missing icon image. I copied the images from toolkit sample but no go.
anyone know whats wrong?
anyway to force icons on template?
thanks.
Do you need to set the Build Action of the icons to "Content" in their properties window?
I found out the solution by exploring the sample solution of the toolkit.
If you don't use a special page for the fullmode selection, you need to include the following images to your project:
Create one subfolder named Toolkit.Content (not ToolKit/Content).
Then, include the files named as this : ApplicationBar.Cancel.png and ApplicationBar.Check.png.
Mark them to be generated as content.
That's all! Your icons should now been displayed.
Hope this helps you !
Lets say i am developing a chat, first you come to a login window and when your logged in i want to use the same window but chaning the control :P how would be the best way to desight this?
is there any good way to implement this what root element should i use?
Thanks a lot!!
Take a look at Josh Smith's article in MSDN magazine (http://msdn.microsoft.com/en-us/magazine/dd419663.aspx). He describes an interesting method where you have a content presenter on your main window use data templates to switch out what the window is showing.
If you want to do this all within the same window, you could use a Grid as the root element and host a login element (possibly another grid for layout) and the chat window. These elements would stack on top of one another, depending upon the order in which you declare them. To hide the chat element initially, set its Visibility to Collapsed
You could then have the login element's Visibility set to Collapsed when the user submits their login details, and have the chat element's Visibility set to Visible.
I did something similar once and it worked well for me.
Hope that helps.
EDIT I knocked this together in Kaxaml for you to play with (and because I like playing with XAML):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border x:Name="_loginForm" BorderBrush="#888" BorderThickness="3" CornerRadius="5"
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Visibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="30">Welcome to chat</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">User Name</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" x:Name="_userName" />
<TextBlock Grid.Row="2" Grid.Column="0">Password</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="_password"></TextBox>
<Button Grid.Row="3" Grid.Column="1">Log In</Button>
</Grid>
</Border>
<DockPanel x:Name="_chatForm" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True" Visibility="Collapsed">
<DockPanel DockPanel.Dock="Bottom" LastChildFill="True" Height="70">
<Button DockPanel.Dock="Right" Width="70">_Send</Button>
<TextBox x:Name="_input" HorizontalAlignment="Stretch">Hello world</TextBox>
</DockPanel>
<ListBox x:Name="_messageHistory" />
</DockPanel>
</Grid>
</Page>
Initially the element _loginForm is visible. You'd attach a handler for the Log In button's Click event that would hide it, and show the _chatForm instead.
This example shows usage of several layout controls -- the Grid, DockPanel and StackPanel.
Alternatively, you can use a StackPanel for your layout. As a simple example, you can have 2 elements in your panel; a custom login control as well as the chat 'display' control. After successfully logging in, remove the custom login control from your stack so only the chat is visible.
It's WPF! Animate them in and out of view...you can do that now. There's a collaborative project on Google Code called Witty (a desktop Twitter client written in WPF), and they do something really cool that you might want to borrow from. Come to think of it, there's another WPF Twitter client (blu) that does similar animations that you might want to look at.
In Witty, the Settings dialog is a normal window, but when you switch between the tabs, a storyboard slides the part of the window you requested into view. I haven't debugged the app at this level, but I'm assuming that they have a horizontal StackPanel populated with containers that are fixed to the height and width of the dialog, and they slide them in and out with a storyboard.
Take a look at both of these apps for ideas. You may want to do something similar, but being that this is a WPF app, the sky is really the limit.
Witty
blu
There are already some answers here on, how to swap two elements at the view level. This post offers a way to more fundamentally create a modular application design with interchangeable views.
You could take a look at the Composite Application Library. It is a small library (developed by Microsoft) that among other things aid in making your application more modular. With this you can define regions of your GUI, that can have interchangeable views.
In your containing xaml import the CAL namespace and use RegionManager to define a region:
<Window ...
xmlns:cal="http://www.codeplex.com/CompositeWPF"
...>
...
<ItemsControl cal:RegionManager.RegionName="MyRegion" />
...
Then you can swap views in this region, preferably in a module:
_regionManager.Regions["MyRegion"].Add(new LoginView());
...swap...
_regionManager.Regions["MyRegion"].Add(new ChatView());
This is of course just an outline of what you can do. In order to implement this solution, you will have to look further in to CAL. It has great documentation and lots of examples to learn from.
I think a more intuitive solution is to use a Frame control as the base control of your window - and to use the NavigateService to change the source of the Frame to different Page controls (which could be defined in separate assemblies, or in your same project as different XAML files).
Your Window:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Frame Source="LogonPage.xaml" NavigationUIVisibility="Hidden" />
</Window>
And your separate LogonPage:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Logon">
<!-- Your content of the page goes here... -->
</Page>