locked
[XAML][C#] Modal Positioning RRS feed

  • Question

  • Hi guys,

    I just wanted to ask on how to repositioning the location of my custom content dialog when the keyboard show ? I set the margin of my Border on this position Margin="400,200,0,0" , but someshow when I Click the textbox the keyboard show the dialog at the back of the keyboard. does anybody experience this and have a solution ?

    Here's my xaml custom content dialog code 

    <Grid x:Name="RootPanel" Background="Transparent">
            <Border x:Name="discountBorder" Grid.Column="1" Background="White" BorderBrush="#FFD4D7D8" BorderThickness="1" CornerRadius="5"
                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="400,200,0,0">
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" Content="-" 
                        Background="#FF0D47A1" 
                        BorderBrush="#FF0D47A1" 
                        BorderThickness="0"
                        HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Roboto" FontSize="25" FontWeight="Normal" Style="{StaticResource ButtonStyle1}" Click="Button_Click"/>
                    <StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBox x:Name="txtquantity" Text="0" Foreground="#FF677E88" HorizontalAlignment="Center" 
                                 VerticalAlignment="Bottom" TextAlignment="Center" BorderBrush="{x:Null}" 
                                 FontFamily="Roboto" FontSize="25" VerticalContentAlignment="Center" 
                                 InputScope="Number"
                                 SelectionHighlightColor="#FF4CAF50" KeyDown="TextBox_KeyDown" KeyUp="txtquantity_KeyUp" />
                        <TextBlock Text="QUANTITY" Foreground="#FFB0BEC5" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Roboto" FontSize="12"/>
                    </StackPanel>
                    <Button Grid.Column="2" 
                        Content="+" 
                        Background="#FF0D47A1" 
                        BorderBrush="#FF0D47A1" 
                        BorderThickness="0"
                        Foreground="White"
                        HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Roboto" FontSize="25" FontWeight="Normal" Style="{StaticResource ButtonStyle1}" Click="Button_Click_1"/>
                </Grid>
            </Border>
        </Grid>

    this is how I call the custom dialog using c#

    QtyPage dialog = new QtyPage(Customer1_itemDetails.SelectedItem as Order_Details);
    dialog.CloseRequested += eventDialog_CloseRequested;
    this._eventPopup = new Popup();
    this._eventPopup.Child = dialog;
     this._eventPopup.IsOpen = true;

    thanks in advance :)

    Wednesday, December 2, 2015 6:00 AM

Answers

  • Hello Everyone , 

    I just fixed my issue using this lines of code

    after this code 

    this._eventPopup.IsOpen = true;

    I set popup as a child on my element Grid   

    <Grid x:name="WholePage" />
    WholePage.Children.Add(_eventPopup);



    • Edited by imNeil Tuesday, December 15, 2015 7:22 AM
    • Proposed as answer by Fred Bao Tuesday, December 15, 2015 8:31 AM
    • Marked as answer by Fred Bao Wednesday, December 16, 2015 7:08 AM
    Tuesday, December 15, 2015 7:20 AM

All replies

  • Hello,

    You have to subscribe on InputPane_Showing event like below 

    public MainPage()
    {
        this.InitializeComponent();
        var inputPane = Windows.UI.ViewManagement.InputPane.GetForCurrentView();
        inputPane.Showing += inputPane_Showing;
    }
    void inputPane_Showing(Windows.UI.ViewManagement.InputPane sender, Windows.UI.ViewManagement.InputPaneVisibilityEventArgs args)
    {
        args.EnsuredFocusedElementInView = true;
    }

    Wednesday, December 2, 2015 7:57 AM
  • Hi Azat,

    Where shall I write this code ? I tried on the custom dialog C# code on the constructor function but the modal still not repositioning. How about change its location(margin) is that possible if  the modal has instancetiated at the left-center and if the keyboard show change it to top-center . is that possible? 

    Wednesday, December 2, 2015 8:54 AM
  • hi Azat

    What is the purpose of inputpane , when I implement it on behind the code(C# side) of my customize pop up page still it does'nt adjust the position of the page(modal when it comes to browser base) when I tap on textbox since when tap on textbox keyboard will appear. Can you help me to understand what is inputpane still don't get it?

    Thank You.

    Wednesday, December 9, 2015 7:32 AM
  • Hi guys,

    I just wanted to ask on how to repositioning the location of my custom content dialog when the keyboard show ? I set the margin of my Border on this position Margin="400,200,0,0" , but someshow when I Click the textbox the keyboard show the dialog at the back of the keyboard. does anybody experience this and have a solution ?

    Here's my xaml custom content dialog code 

    <Grid x:Name="RootPanel" Background="Transparent">
            <Border x:Name="discountBorder" Grid.Column="1" Background="White" BorderBrush="#FFD4D7D8" BorderThickness="1" CornerRadius="5"
                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="400,200,0,0">
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>

                    <Button Grid.Column="0" Content="-" 
                        Background="#FF0D47A1" 
                        BorderBrush="#FF0D47A1" 
                        BorderThickness="0"
                        HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Roboto" FontSize="25" FontWeight="Normal" Style="{StaticResource ButtonStyle1}" Click="Button_Click"/>
                    <StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBox x:Name="txtquantity" Text="0" Foreground="#FF677E88" HorizontalAlignment="Center" 
                                 VerticalAlignment="Bottom" TextAlignment="Center" BorderBrush="{x:Null}" 
                                 FontFamily="Roboto" FontSize="25" VerticalContentAlignment="Center" 
                                 InputScope="Number"
                                 SelectionHighlightColor="#FF4CAF50" KeyDown="TextBox_KeyDown" KeyUp="txtquantity_KeyUp" />
                        <TextBlock Text="QUANTITY" Foreground="#FFB0BEC5" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Roboto" FontSize="12"/>
                    </StackPanel>
                    <Button Grid.Column="2" 
                        Content="+" 
                        Background="#FF0D47A1" 
                        BorderBrush="#FF0D47A1" 
                        BorderThickness="0"
                        Foreground="White"
                        HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Roboto" FontSize="25" FontWeight="Normal" Style="{StaticResource ButtonStyle1}" Click="Button_Click_1"/>
                </Grid>
            </Border>
        </Grid>

    this is how I call the custom dialog using c#

    QtyPage dialog = new QtyPage(Customer1_itemDetails.SelectedItem as Order_Details);
    dialog.CloseRequested += eventDialog_CloseRequested;
    this._eventPopup = new Popup();
    this._eventPopup.Child = dialog;
     this._eventPopup.IsOpen = true;

    thanks in advance :)


    What is the QtyPage? Could you please provide a complete demo project?
    Friday, December 11, 2015 7:46 AM
  • hi 

    here's the simple demo that i made (see below) and observe the QtyModal when clicking the text since when it clicks the keyboard pop up and the qtymodal was'nt adopt the positioning.

    https://www.dropbox.com/s/wu062thqpkxjg5m/Demo.zip?dl=0

    thank You

    Sunday, December 13, 2015 9:13 AM
  • Hello Everyone , 

    I just fixed my issue using this lines of code

    after this code 

    this._eventPopup.IsOpen = true;

    I set popup as a child on my element Grid   

    <Grid x:name="WholePage" />
    WholePage.Children.Add(_eventPopup);



    • Edited by imNeil Tuesday, December 15, 2015 7:22 AM
    • Proposed as answer by Fred Bao Tuesday, December 15, 2015 8:31 AM
    • Marked as answer by Fred Bao Wednesday, December 16, 2015 7:08 AM
    Tuesday, December 15, 2015 7:20 AM