VS 2012 RibbonButton Open Form - ribbon-control

How do you get a RibbonButton to open a Form (let's say Form1)? There is a click callback on RibbonButton called "Click" but I am not sure what to do with this. I am guessing something needs to go in the VB window but I have no idea what.
The MSDN library suggests "Event Click As RibbonControlEventHandler" which is great but what do you do with it?
Any help would be appreciated.

Ok, I just got a simple version working. It turned out that by default the button is only 4x4 pixels and you can't see it to click it - not sure if that was your problem too. Anyway, this is what I did ...
I had a main window with the Ribbon and RibbonButton - sized and coloured so I could see it
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Ribbon x:Name="RibbonWin" SelectedIndex="0">
<RibbonButton x:Name="btnOne" Height="32" Width="32">
<RibbonButton.Background>
<SolidColorBrush Color="Red"/>
</RibbonButton.Background>
</RibbonButton>
</Ribbon>
</Grid>
</Window>
Then I added a second Window to be shown on the click event
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</Window>
Finally, I added a Click handler for the RibbonButton on the main window
Private Sub btnOne_Click(sender As Object, e As RoutedEventArgs) Handles btnOne.Click
Dim wnd As Window1 = New Window1
wnd.ShowDialog()
End Sub
Now everything works as expected. Does that help?

Related

PRISM Navigation - Xamarin Forms - MasterDetail/FlyoutPage page setup, previous page nav links disabled when back button pressed?

So I built an app using Prism Library and Xamarin Forms and the Navigation flow starts with a MasterDetail page, like so.
NavigationService.NavigateAsync($"/{nameof(MainMenuPage)}/{nameof(NavigationPage)}/{nameof(DashboardPage)}");
MainMenuPage
My MainMenuPage contains the Flyout page with a ListView of the MenuItems
<FlyoutPage.Flyout>
<NavigationPage
NavigationPage.HasNavigationBar="false"
Icon="{ StaticResource HamburgerIcon }"
Style="{ StaticResource MainMenuStyle }"
Title="{ grial:Translate PageTitleMainMenu }">
<x:Arguments>
<ContentPage>
<Grid>
<BoxView
Style="{ StaticResource MainMenuOrModalBackgroundStyle }"
Opacity="1" />
<Image
Style="{ StaticResource MainMenuBackgroundImageStyle }" />
<Grid
grial:Effects.ApplyIOSSafeAreaAsPadding="Left,Right"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto"/>
</Grid.RowDefinitions>
<local:BrandBlock
Grid.Row="0"
Grid.Column="0"
Margin="20,60,20,30"
VerticalOptions="Start"
HorizontalOptions="Start" />
<ListView
Margin="0,0,0,10"
Grid.Row="1"
SelectedItem="{ Binding SelectedMainMenuItem, Mode=TwoWay}"
ItemsSource="{ Binding MainMenuItems }"
VerticalOptions="FillAndExpand"
Style="{ StaticResource MainMenuListViewStyle }">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<views:MainMenuItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<behavior:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding NavigateCommand}"
EventArgsParameterPath="Item">
</behavior:EventToCommandBehavior>
</ListView.Behaviors>
</ListView>
<views:ApplicationVersionTemplate Grid.Row="2" Margin="35,0,0,20" HorizontalOptions="Start" VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<ContentPage>
<Grid></Grid>
</ContentPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
I'm navigating to the detail pages using the following format:
await NavigationService.NavigateAsync($"{nameof(NavigationPage)}/{SelectedMainMenuItem.PageName}", null, SelectedMainMenuItem.IsModal, SelectedMainMenuItem.IsAnimated);
I noticed in a lot of the samples, the MasterDetailPage.Master node is in a ContentPage not a NavigationPage node like I'm doing. Is that what I'm doing wrong? It looks to me like NavigationPage is a child of Master here. Is that correct? Just trying to figure out why when I go back to a previous page (by pressing the back button in the navbar) the page is disabled, meaning the navigation links no longer work. My initial root page navigation is absolute, all the rest of the Navigate commands are relative.
Note - I changed the MasterDetailPage to FlyoutPage since the naming changed in Xamarin.Forms v5. This bug was happening before I changed the name to FlyoutPage.
I don't know about FlyoutPage.Detail, but MasterDetailPage.Content should be left empty in xaml, it's filled automatically when navigating.
Also, with MasterDetailPage, I navigate to ../SomeOtherPage to add it to the stack (enable back button). Navigate to /MainPage/NavigationPage/AnotherPage to replace the stack (no back button).
So, I rolled back my code to a previous version and then, one at a time, added back in the packages and code changes, smoke testing each iteration along the way. My best guess is there was a conflict between Telerik UI for Xamarin package and the latest Xamarin Forms version but I can't be sure. I updated Xamarin Forms and Prism to latest update and it's all working fine.

Xamarin Forms Transalted Button click

I am creating a rounded menu with Xamarin Forms as Below.
The accent color is my Grid. Then I translatex and trnaslatey the buttons.
My issue is that the click button is not raised. I have also tried on the gesture recognizer of my stack panel. Same result.
The part of the code is below:
<Grid BackgroundColor="Accent" Margin="0,0,0,10" VerticalOptions="End" HorizontalOptions="Center">
<StackLayout x:Name="cat" TranslationX="-109" TranslationY="-102"
>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="catBtn_Clicked"/>
</StackLayout.GestureRecognizers>
<Button Clicked="catBtn_Clicked" WidthRequest="60"
HeightRequest="60"
FontSize="35"
CornerRadius="30" HorizontalOptions="Center"
BackgroundColor="{StaticResource RedColor}"
TextColor="White"
Text="{ x:Static local:GrialIconsFont.Calendar }"
FontFamily="{ StaticResource IconsFontFamily }">
</Button>
<Label Text="{extensions:Translate Hello}" HorizontalOptions="Center"/>
</StackLayout>
Make sure that your button is placed inside superView's bounds,
If a button is placed outside superView's bounds, the button will not clickable.
You use TranslationX="-109" and TranslationY="-102" will make the button out of the bounds of StackLayout, so it won't response to the click event. You can add backgroundColor to stacklayout to see its bounds.
I would suggest you to add those buttons or labels directly to Grid and use absolute-layout, relative-layout or other layout to fix their positions.
There are also some examples in Github you can refer, such as CircleButtonMenu, Xamarin.Forms-RadialMenu

Xamarin.Forms: Tabs with Sharnado.presentation.forms do not respond to tap

I'm trying to use Sharpnado's awesome tab functionality to create what they call "Fixed tabs". But it is not doing what I want it to - and the problem may lay somewhere else... Basically, the tabs are not responding to a tap. I have narrowed it down to just that with this simple exampl.
The context is an app that uses an ordinary tabbed page (with navigation pages for each tab). On one of these tabs I have tried to put the TabHostViewcontrol - even without binding as I originally thought that was the problem. This is a screenshot of the test page:
Nothing happens when I tap the two tabs ("Personlig" and "Udforsk"). The XAML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:tabs="clr-namespace:Sharpnado.Presentation.Forms.CustomViews.Tabs;assembly=Sharpnado.Presentation.Forms"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true"
xmlns:views="clr-namespace:Angler.Views.Partials"
x:Class="Angler.Views.StatisticsPage">
<NavigationPage.TitleView>
<Label Text="{Binding Title}" HorizontalOptions="Center"
VerticalOptions="Center" Style="{StaticResource PageTitle}" />
</NavigationPage.TitleView>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="LightYellow">
<Label Text="{Binding ShowSelectedTab}" Margin="20,10" />
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0"
BackgroundColor="LightPink" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<tabs:TabHostView ShadowType="Bottom" Grid.Row="0">
<tabs:TabHostView.Tabs>
<tabs:UnderlinedTabItem Label="Personlig" />
<tabs:UnderlinedTabItem Label="Udforsk" IsSelected="True" />
</tabs:TabHostView.Tabs>
</tabs:TabHostView>
</Grid>
</StackLayout>
</ContentPage>
The viewmodel looks like this (although the above has been narrowed down to not using the property for the tabindex. But I did also investigate if the binding context for the viewmodel was Ok - and it seems to be):
public class StatisticsPageViewModel : ViewModelBase
{
public int SelectedTabIndex { get; set; }
public string ShowSelectedTab { get { return $"Index: {SelectedTabIndex}"; } }
public StatisticsPageViewModel(INavigationService navigationService, IPageDialogService pageDialogService,
IDeviceService deviceService) : base(navigationService, pageDialogService,
deviceService)
{
Title = AppResources.StatisticsPageTitle;
}
public override void OnAppearing()
{
//SelectedTabIndex = 1;
base.OnAppearing();
Analytics.TrackEvent("Navigate to Statistics");
}
}
I'm using VisualStudio for Mac 8.3.4 (build 8), Sharpnado.presentations.forms 1.3.0 and Prism.forms 7.2.0.1367.
I have tried to add InputTransparent="True" to some of the container objects - with no effect.
Any good ideas as to how to solve this is most appreciated!
Ok, this was just stupid (and a waste of two days!)...
In trying to solve other issues I had stepped back in my source repo - and once too far back... So the initialization of Sharpnado in the platforms projects were not there. That kind of made a difference.
So you will see this kind of behavious if you have not remembered to add this line to your platform projects:
SharpnadoInitializer.Initialize()
Just leaving it here in the case that someone else might end up with the same symptom :-)

PopUp to contains other controls like DateTime Picker,dropdownlist

newbie here. I remember in Win10, there is a PopUp UI which can contains many controls like Dropdown box, DatePciker and others. This PopUp can be constructed in Xaml.
I am developing an app for Tablet.
It is possible to use such PopUp in Xamarin forms which contains Dropdown List, DatePicker, Time Picker? It is advisable to do such complex UI ? will it cause problem in Android and iOS?
Problem : How to create PopUp in Xaml
so ,I can use a button to open or close it.
var button = new Button {Text = "Show Popup"};
button.Clicked += (s, e) => popup.Show();
Update
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.View.PopUpDemo"
Title="PopUp Demo"
Icon="itemIcon3">
<Grid>
<Grid>
<!--Your Page xaml-->
<Button x:Name="btnPopUp" Click="ShowPopUp"/>
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>
</ContentPage>
I would like to know :
I am using a normal ContentPage.
1) In it, i place your MarkUp <Grid> ,I remove <ContentPage.Content>. Is this correct?
2) Is Frame will be the PopUp ?
3) what code to use in btnPopUp to show the PopUp?
Thanks
Yes you can achieve it without any performance issue. Either you can use an overlay to show pop up as shown below
<Grid>
<Grid>
<!--Your Page xaml-->
</Grid>
<Grid HorizontalOptions="Fill" BackgroundColor="##60000000" IsVisible="{Binding GridVisibility}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Column="1" Padding="0" HasShadow="True" OutlineColor="#e6e6e6">
<Grid BackgroundColor="White" RowSpacing="0" ColumnSpacing="0">
<!--content for popup-->
</Grid>
</Frame>
</Grid>
</Grid>
</Grid>
This one is quite simple. Here i have added grid to achieve this. You can also use other layouts. But for performance grid is better as per xamarin team.
For the second grid i have added Visibility property so that you can wire up with any event.
Here i have added backgroundcolor for popup ##60000000 so that when popup appears background will be transparent with light black color effect.
If you need to have same pop up in multiple screens you can use 3rd party plugin https://github.com/rotorgames/Rg.Plugins.Popup which will make you work easier. For this you have to make a new contentpage, replace the contentpage with
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class=""
BackgroundColor="##60000000"
InputTransparent="True"
HasSystemPadding="True"
CloseWhenBackgroundIsClicked="False">
<pages:PopupPage.Animation>
<animations:MoveAnimation
PositionIn="Bottom"
PositionOut="Bottom"/>
</pages:PopupPage.Animation>
<Grid>
<!--your xaml code-->
</Grid>
Note:Replace contentPage with PopupPage in youpage.xaml.cs. To get popup effect your layout should be like 1st example i shown. Here you can also get nice animation effects. More details you can see in their site.
Now you can call the pop up by calling:navigation.PushPopupAsync(new YourContentPage());
And remove the popup by calling await PopupNavigation.RemovePageAsync(this);
Hope this will be useful for you

Binding WPF menu items to WPF Tab Control Items collection

I have a WPF Menu and a Tab control. I would like the list of menu items to be generated from the collection of TabItems on my tab control. I am binding my tab control to a collection to generate the TabItems. I have a TabItem style that uses a ContentPresenter to display the TabItem text in a TextBlock. When I bind the tab items to my menu the menu items are blank. I am using a Style Setter to set the Menu Item name, but I am not sure what property of the TabItem I would use to set the MenuItem text. Is there a workaround for my scenario? Is it possible to bind to the Header property of the tab item, when I do not know the number of tabs in advance? Below is a copy of my xaml declarations. Tab Control and items:
<DataTemplate x:Key="ClosableTabItemTemplate">
<DockPanel HorizontalAlignment="Stretch">
<Button
Command="{Binding Path=CloseWorkSpaceCommand}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Courier"
FontSize="9"
FontWeight="Bold"
Margin="10,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16"
Background="Red"
/>
<ContentPresenter HorizontalAlignment="Center"
Content="{Binding Path=DisplayName}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}"/>
</ContentPresenter.Resources>
</ContentPresenter>
</DockPanel>
</DataTemplate>
<DataTemplate x:Key="WorkspacesTemplate">
<TabControl
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource ClosableTabItemTemplate}"
Margin="10"
Background="#4C4C4C"/>
</DataTemplate>
My Menu and partial style listing
//I am not sure which value am I suppose to use, since I am not using header
<Menu Background="Transparent">
<MenuItem Style="{StaticResource TabMenuButtonStyle}"
ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type TabControl}}, Path=Items}"
ItemContainerStyle="{StaticResource TabMenuItem}">
</MenuItem>
</Menu>
Create the following style and bind Header property to display property in ViewModel
<Style TargetType="{x:Type TabItem}">
<Setter Property="Header" Value="{Binding PropertyInViewModel}" />
</Style>

Resources