Search code examples
c#xamluniversal

XAML StackPanel cropping items on other page


I'm building a C# XAML Universal app in VS, with some simple navigation between pages. Until a few days ago, the navigation was all working fine, with you being able to click a button on the main page and it take you to the second page, then you being able to click a back button on that second page and it return you back to the start. Now, the other pages (Not the main page) are cropping all their items individually, so that small items even disappear. The back button, which is just a small 200x200px image, is not displaying, and on the 'Timer' page, the timer text is cropped down a lot. Here is a screenshot of the timer page in the editor, then in the debug program.

Timer.xaml in the editor

Timer.xaml running in a window

Below will be the source.

How can I get this to stop cropping? What am I doing wrong?

Here is a download of the whole lot: https://mega.nz/#!2gskULpZ!ExddgKx083jCTXzCetpgtE4li_rTcupsvCWLOZvK2Kg

Thanks!

timer.xaml:

    <Page
    x:Class="CubingHelper.Timer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CubingHelper"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="TimerBG">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="23*"/>
            <ColumnDefinition Width="1898*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="728*"/>
            <RowDefinition Height="353*"/>
        </Grid.RowDefinitions>
        <Grid.Background>
            <SolidColorBrush Color="{StaticResource BGCol}"/>
        </Grid.Background>

        <TextBlock x:Name="TimerText" Text="0.00" Margin="494,151,639,184" FontFamily="extravaganzza" FontSize="340" RenderTransformOrigin="0.696,0.733" Grid.Column="1" >
            <TextBlock.Foreground>
                <SolidColorBrush Color="{StaticResource ForeGroundText}"/>
            </TextBlock.Foreground>
        </TextBlock>


        <Button Height="724" Width="296" Click="BackButton_Click" Margin="0,0,0,3" Background="#33000000" Grid.ColumnSpan="2">
            <Button.Template>
                <ControlTemplate>
                    <Image x:Name="BackImg" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="-2.5,-1.59" Source="Assets/BackButton.png" />
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</Page>

Timer.xaml.cs:

    using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Windows.Input;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Core;
using Windows.System;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace CubingHelper
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class Timer : Page
    {
        public Timer()
        {
            this.InitializeComponent();
        }


        private void BackButton_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(MainPage));
        }


        private void KeysDown(object sender, KeyEventArgs e)
        {
            if (e.VirtualKey == VirtualKey.Space)
            {
                TimerText.FontSize = 200;
            }
        }
    }
}

and MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace CubingHelper
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
            appView.Title = "Home";
        }


        private void PLL_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(PLL));
            var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
            appView.Title = "PLL";
        }

        private void OLL_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(OLL));
            var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
            appView.Title = "OLL";
        }

        private void Timer_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(Timer));
            var appView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();
            appView.Title = "Timer";
        }
    }
}

Solution

  • You have messed up the xaml layouts totally. Dont know what exactly you are trying achieve. To get the layout similar to your first screenshot i changed margin from your textblock from (Margin="494,151,639,184") to (Margin="494,151,0,0") and setting button's grid position as

    Grid.Column="1"
    Grid.RowSpan="2"