locked
InputDialog from WinRTXamlToolkit positioning issue

    Question

  • In a windows store app, i have the following page

    <common:LayoutAwarePage
    x:Class="Gapp_metro.Pages.DocumentsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Gapp_metro.Pages"
    xmlns:common="using:Gapp_metro.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    
    <Grid Style="{StaticResource RootGridStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
    
        <Grid Style="{StaticResource HeaderGridStyle}" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
    
            <Button Click="GoBack" IsEnabled="{Binding Frame.CanGoBack}" Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" />
        </Grid>
    
        <Grid Grid.Row="1" Style="{StaticResource ContentGridStyle}" VerticalAlignment="Center">
            <GridView x:Name="gridView" Grid.Row="1" ItemsSource="{Binding Tiles}" Style="{StaticResource GridViewStyle}" ItemClick="OnItemClick" />
    
            <ListView x:Name="listView" Grid.Row="1" ItemsSource="{Binding Tiles}" Style="{StaticResource ListViewStyle}" ItemClick="OnItemClick"
                      Visibility="Collapsed" />
    
            <ProgressRing x:Name="ProgressR" Grid.Row="1" IsActive="{Binding IsLoading}" />
        </Grid>
    
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled"/>
                <VisualState x:Name="FullScreenPortrait" />
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="listView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    
    <Page.BottomAppBar>
        <AppBar x:Name="appBar" Style="{StaticResource AppBarStyle}">
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                <Button Click="OnAddButtonClick" Style="{StaticResource AddAppBarButtonStyle}" />
                <Button Click="OnUploadButtonClick" Style="{StaticResource UploadAppBarButtonStyle}" />
                <Button Click="OnPhotoButtonClick" Style="{StaticResource PhotoAppBarButtonStyle}" />
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>

    and in my code behind i have this function for the "Click="OnAddButtonClick""

    private async void OnAddButtonClick(object sender, RoutedEventArgs e)
        {
            var dialog = new InputDialog();
            dialog.BackgroundStripeBrush = new SolidColorBrush(Color.FromArgb(255, 149, 191, 0));
            dialog.Background = new SolidColorBrush(Color.FromArgb(255, 149, 191, 0));
            dialog.BorderBrush = new SolidColorBrush(Color.FromArgb(255, 149, 191, 0));
            Style buttonStyle = new Style() { TargetType = typeof(Button) };
            buttonStyle.Setters.Add(new Setter(BackgroundProperty, new SolidColorBrush(Colors.Transparent)));
            dialog.ButtonStyle = buttonStyle;
            var result = await dialog.ShowAsync(App.Current.Resources["createFolder"] as String, App.Current.Resources["newFolderName"] as String, App.Current.Resources["create"] as String, App.Current.Resources["close"] as String);
    
            dialog.VerticalAlignment = VerticalAlignment.Top;
            dialog.Margin = new Thickness(0, 0, 0, 0);
    ....

    but when i press the add button, the input dialog always appears in the center of screen

    how do i make it appearon the top ?

    Friday, December 05, 2014 11:33 AM

Answers

  • Hi Thought2,

    Not sure how InputDialog works, you should definitely ask question at WinRTXamlToolkit site.

    However I guess InputDialog looks like a popup and we can customize our own InputDialog by using Popup class, you could insert things into it and customize the position where you want. For more code examples that show the Popup control, see the XAML Popup sample.

    --James

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, December 08, 2014 1:37 AM
    Moderator

All replies

  • another issue that happens, is that the virtual keyboard pushes the InputDialog out of the screen


    • Edited by Thought2 Friday, December 05, 2014 11:40 AM
    Friday, December 05, 2014 11:39 AM
  • Hi Thought2,

    Not sure how InputDialog works, you should definitely ask question at WinRTXamlToolkit site.

    However I guess InputDialog looks like a popup and we can customize our own InputDialog by using Popup class, you could insert things into it and customize the position where you want. For more code examples that show the Popup control, see the XAML Popup sample.

    --James

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, December 08, 2014 1:37 AM
    Moderator