Поменять нижнюю и верхнюю часть страницы

Question

image image У меня есть страница, где я отображаю одно слово на одном языке вверху и перевод внизу. Мне нужна функциональность, чтобы поменять местами эти два, чтобы перевести go наверх и так далее, но тогда пользователь должен иметь возможность go вернуться через ту же кнопку и получить ее в первоначальном порядке.

Я пытался удалить свои сетки и добавить их снова, но это не только дает мне другой результат позиционирования, но также вызывает исключение, если я повторяю процесс несколько раз.

На данный момент я решил это с помощью 4 слов, и два из них имеют видимость false, и как только пользователь должен изменить свою позицию, я изменяю его на true.

Вот так

if (czechAndEnglishSwitched)
            {
                if (isHidden)
                {
                    HideLabels(null, null);
                }
                nameEng.IsVisible = false;
                nameEngSwitched.IsVisible = true;
                explanation.IsVisible = false;
                explanationSwitched.IsVisible = true;
                btnChangePositions.Text = "EN/CZ";
                defaultEnglishGrid.Children.Remove(btnMakeLargerName);
                parentOfDefaultCzechGrid.Children.Remove(btnMakeLarger);
                defaultEnglishGrid.Children.Add(btnMakeLarger);
                parentOfDefaultCzechGrid.Children.Add(btnMakeLargerName);
                czechAndEnglishSwitched = false;
            }
            else
            {
                if (isHidden)
                {
                    HideLabels(null, null);
                }
                nameEng.IsVisible = true;
                nameEngSwitched.IsVisible = false;
                explanation.IsVisible = true;
                explanationSwitched.IsVisible = false;
                czechAndEnglishSwitched = true;
                defaultEnglishGrid.Children.Add(btnMakeLargerName);
                parentOfDefaultCzechGrid.Children.Add(btnMakeLarger);
                btnChangePositions.Text = "CZ/EN";
            }

What i have tried before
 private void ExchangeEnglishAndCzechVersion(object sender, EventArgs e)
        {
            //if (czechAndEnglishSwitched)
            //{
            //    if (isHidden)
            //    {
            //        HideLabels(null, null);
            //    }
            //    mainGrid.Children.Remove(parentOfDefaultCzechGrid);
            //    mainGrid.Children.Remove(defaultEnglishGrid);

            //    mainGrid.Children.Add(defaultEnglishGrid);
            //    mainGrid.Children.Add(parentOfDefaultCzechGrid);

            //    mainGrid.Children.Add(gridButtons);
            //    mainGrid.Children.Add(gridDailyAmount);
            //    parentOfDefaultCzechGrid.Padding = new Thickness();

            //    defaultEnglishGrid.Children.Remove(btnBin);
            //    defaultEnglishGrid.Children.Remove(btnVisual);
            //    defaultEnglishGrid.Children.Add(buttonPlay);

            //    defaultCzechGrid.Children.Add(btnBin); 
            //    defaultCzechGrid.Children.Add(btnVisual);
            //    czechAndEnglishSwitched = false;
            //}
            //else
            //{
            //    if (isHidden)
            //    {
            //        HideLabels(null, null);
            //    }
            //    mainGrid.Children.Remove(parentOfDefaultCzechGrid);
            //    mainGrid.Children.Remove(defaultEnglishGrid);

            //    mainGrid.Children.Add(defaultEnglishGrid);
            //    mainGrid.Children.Add(parentOfDefaultCzechGrid);


            //    defaultCzechGrid.Children.Remove(btnBin);
            //    defaultCzechGrid.Children.Remove(btnVisual);
            //    defaultCzechGrid.Children.Add(buttonPlay);
            //    defaultEnglishGrid.Children.Remove(buttonPlay);
            //    defaultEnglishGrid.Children.Add(btnVisual);
            //    defaultEnglishGrid.Children.Add(btnBin);

            //    parentOfDefaultCzechGrid.Padding = new Thickness();
            //    czechAndEnglishSwitched = true;
            //}

Теперь я новичок, но я думаю, что установка их видимости на false и получение данных дважды приведет к снижению производительности. Я также думал просто о новой странице.

xaml

<Grid HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Padding="0" x:Name="mainGrid">
        <Grid BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }"
                   RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition
                        Height="27*" />
                <RowDefinition
                        Height="27*" />
                <RowDefinition
                        Height="12*" />
                <RowDefinition
                        Height="Auto" />

                <!--<RowDefinition
                        Height="7*" />-->
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Padding="5"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid ><!--Margin="5"-->
                    <!-- CARD ONE -->
                    <grial:CardView  x:Name="defaultEnglishGrid"
                        Style="{ StaticResource ResponsiveLandscapeMarginStyle }"
                                VerticalOptions="FillAndExpand"
                                CornerRadius="10" 
                            Padding="5">
                        <!-- Text -->
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition
                                                Width="*" />
                                    <ColumnDefinition
                                                Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="150" />
                                </Grid.RowDefinitions>
                                <Grid Grid.Column="0" HeightRequest="150" Grid.Row="0">
                                    <ScrollView>
                                    <controls:ExtendedWebView x:Name="nameEng" Opacity="1"  IsVisible="True" HeightRequest="150"/>
                                    </ScrollView>
                                    <ScrollView>
                                        <controls:ExtendedWebView x:Name="explanationSwitched"  VerticalOptions="Start" IsVisible="False" HorizontalOptions="Start" Opacity="1" HeightRequest="150"/>
                                    </ScrollView>

                            </Grid>
                                <!-- Column button Play-->
                                <Grid Padding ="5,0,0,0"
                                            Grid.Row="0"
                                            Grid.Column="1">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.5*"></RowDefinition>
                                        <RowDefinition Height="0.5*"></RowDefinition>
                                    </Grid.RowDefinitions>
                                    <Label   x:Name="buttonPlay" Grid.Row="0"
                                             VerticalTextAlignment="Start"
                                             HorizontalTextAlignment="End"
                                             Text="{ x:Static local:GrialIconsFont.Volume2 }"
                                             FontFamily="{ StaticResource IconsFontFamily }"
                                             TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                               Tapped="StartOrStopPlaying">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                        <Label.FontSize>
                                            <OnIdiom
                                    x:TypeArguments="x:Double"
                                    Phone="25"
                                    Tablet="30" />
                                        </Label.FontSize>
                                    </Label>
                                <Label   x:Name="buttonPause" 
                                             VerticalTextAlignment="Start"
                                             HorizontalTextAlignment="End"  IsVisible="False"
                                             Text="{ x:Static local:GrialIconsFont.AudioPause }"
                                             FontFamily="{ StaticResource IconsFontFamily }"
                                             TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                                Tapped="StartOrStopPlaying">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                        <Label.FontSize>
                                            <OnIdiom
                                                x:TypeArguments="x:Double"
                                                Phone="25"
                                                Tablet="30" />
                                        </Label.FontSize>
                                    </Label>
                                </Grid>
                                <!-- Column Button Plus -->
                            <Grid Padding ="5,0,0,0" Grid.Row="1"

                                            Grid.Column="1"
                                            VerticalOptions="End">
                                    <Label x:Name="btnMakeLargerName" 
                                           VerticalTextAlignment="End"
                                           HorizontalTextAlignment="End"
                                           Text="{ x:Static local:GrialIconsFont.ZoomIn }"
                                           FontFamily="{ StaticResource IconsFontFamily }"
                                           TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                                Tapped="MakeWebViewLargeName">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                    <Label.FontSize>
                                            <OnIdiom
                                    x:TypeArguments="x:Double"
                                    Phone="25"
                                    Tablet="30" />
                                        </Label.FontSize>
                                    </Label>

                                </Grid>

                            </Grid>
                    </grial:CardView>
                </Grid>
            </Grid>
            <Grid Grid.Row="1" Padding="5"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                <Grid x:Name="defaultCzechGrid" >
                    <!--Margin="5"--> 
                    <!-- CARD TWO -->
                    <grial:CardView x:Name="parentOfDefaultCzechGrid" 
                                    Style="{ StaticResource ResponsiveLandscapeMarginStyle }"
                                    CornerRadius="10"   VerticalOptions="FillAndExpand"
                                    Padding="0" >

                            <!-- Text -->
                            <Grid RowSpacing ="5">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.8*"></ColumnDefinition>
                                    <ColumnDefinition Width="0.2*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="3*"/>
                                <RowDefinition Height="3*"/>
                                <RowDefinition Height="0.1*"/>
                                <RowDefinition Height="3*"/>
                            </Grid.RowDefinitions>
                                <Grid Grid.Column="0" Grid.RowSpan="4" HeightRequest="150">
                                <ScrollView>
                                <controls:ExtendedWebView x:Name="explanation"  IsVisible="True"  VerticalOptions="Start"  HorizontalOptions="Start" Opacity="1" HeightRequest="150"/>
                                    </ScrollView>
                                <ScrollView>
                                    <controls:ExtendedWebView x:Name="nameEngSwitched" Opacity="1"  IsVisible="False"  HeightRequest="150"/>
                                </ScrollView> 
                           </Grid>


                                <!-- Column button Eye-->
                                <StackLayout Padding="2"
                                            Grid.Row="0" 
                                            Grid.Column="1"

                                    VerticalOptions="Start">
                                    <Label x:Name="btnVisual" 
                                           VerticalTextAlignment="Start"
                                           HorizontalTextAlignment="End"
                                           Text="{ x:Static local:GrialIconsFont.Eye }"
                                           FontFamily="{ StaticResource IconsFontFamily }"
                                           TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                                Tapped="HideLabels">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                    <Label.FontSize>
                                            <OnIdiom
                                    x:TypeArguments="x:Double"
                                    Phone="25"
                                    Tablet="30" />
                                        </Label.FontSize>
                                    </Label>
                                </StackLayout>

                                <!-- Column Button Trash -->
                            <StackLayout Padding="2"
                                         Grid.Row="1"
                                         Grid.Column="1"
                                         Spacing="0" VerticalOptions="CenterAndExpand">
                                    <Label x:Name="btnBin"  
                                           VerticalTextAlignment="Center"
                                           HorizontalTextAlignment="End"
                                           Text="{ x:Static local:IoniconsFont.IosTrash }"
                                           FontFamily="{ StaticResource Ionicons }"
                                           TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                                Tapped="RemoveWordFromUserDictionary">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>

                                    <Label.FontSize>
                                            <OnIdiom
                                    x:TypeArguments="x:Double"
                                    Phone="25"
                                    Tablet="30" />
                                        </Label.FontSize>
                                    </Label>

                                </StackLayout>

                                <!-- Column Button Plus -->
                            <StackLayout Padding="2"
                                         Grid.Row="3"
                                         Grid.Column="1"
                                         Spacing="0" VerticalOptions="End">
                                    <Label  x:Name="btnMakeLarger" 
                                            VerticalTextAlignment="End"
                                            HorizontalTextAlignment="End"
                                            Text="{ x:Static local:GrialIconsFont.ZoomIn }"
                                            FontFamily="{ StaticResource IconsFontFamily }"
                                            TextColor="{ DynamicResource AccentColor }">
                                        <Label.GestureRecognizers >
                                            <TapGestureRecognizer
                                                Tapped="MakeWebViewLargeExplanation">
                                            </TapGestureRecognizer>
                                        </Label.GestureRecognizers>
                                    <Label.FontSize>
                                            <OnIdiom
                                    x:TypeArguments="x:Double"
                                    Phone="25"
                                    Tablet="30" />
                                        </Label.FontSize>
                                    </Label>

                                </StackLayout>

                            </Grid>

                    </grial:CardView>
                </Grid>
            </Grid>
            <!-- CARD Three -->
            <Grid Grid.Row="2" Padding="5,2,5,0"  RowSpacing="10" x:Name="gridButtons" >
                <Grid>
                    <grial:CardView
                                Style="{ StaticResource ResponsiveLandscapeMarginStyle }"

                                HeightRequest="100" HorizontalOptions="Fill"
                                CornerRadius="10" VerticalOptions="CenterAndExpand"
                        Padding="0,0,0,3">
                        <Grid Padding="0"
                                    VerticalOptions="Start"
                                    HorizontalOptions="CenterAndExpand">
                            <Grid.RowDefinitions>
                            <RowDefinition
                                Height="Auto" />
                            <RowDefinition
                                Height="Auto" />
                            </Grid.RowDefinitions> 
                            <!-- BUTTONS GRID -->
                            <Grid Margin="0"
                                  ColumnSpacing="10"
                        HorizontalOptions="CenterAndExpand"
                            VerticalOptions="Center">

                                <!-- Rating Button Grid -->
                                <Grid Grid.Row="0"    ColumnSpacing="15" Padding="0,2,0,0">
                                    <!-- One -->
                                    <Button x:Name="firstRateBtn"  Grid.Column="0" HorizontalOptions="Center" Text="1"  Style="{ StaticResource CircleActionButtonFlatStyle }" VerticalOptions="Start"  HeightRequest="50" CornerRadius="25" WidthRequest="50" Clicked="RateOneAndShowOtherword"/>
                                <!-- Two -->
                                    <Button x:Name="secondRateBtn"  Grid.Column="1" HorizontalOptions="Center" Text="2" Style="{ StaticResource CircleActionButtonFlatStyle }" VerticalOptions="Start" HeightRequest="50" CornerRadius="25" WidthRequest="50" Clicked="RateTwoAndShowOtherword" />
                                <!-- Three-->
                                    <Button  x:Name="thirdRateBtn"   Grid.Column="2" HorizontalOptions="Center" Text="3" Style="{ StaticResource CircleActionButtonFlatStyle }" VerticalOptions="Start" HeightRequest="50" CornerRadius="25" WidthRequest="50" Clicked="RateThreeAndShowOtherword"  />
                                <!-- Four -->
                                    <Button x:Name="fourthRateBtn"  Grid.Column="3" HorizontalOptions="Center" Text="4"  Style="{ StaticResource CircleActionButtonFlatStyle }" VerticalOptions="Start" HeightRequest="50" CornerRadius="25" WidthRequest="50" Clicked="RateFourAndShowOtherword"/>
                                <!-- Five -->
                                    <Button  x:Name="fifthRateBtn"  Grid.Column="4" HorizontalOptions="Center" Text="5"  Style="{ StaticResource CircleActionButtonFlatStyle }" VerticalOptions="Start" HeightRequest="50" CornerRadius="25" WidthRequest="50" Clicked="RateFiveAndShowOtherword" />
                                </Grid>

                            </Grid>
                            <!-- Labels -->
                            <Grid Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" Padding="0,2,0,0">
                                <!--Text Wrong-->
                                <Label Text="{ grial:Translate A_LabelCorrectWrong }" FontSize="14" Style="{ StaticResource LabelBoldStyle }" TextColor="{ DynamicResource CircleActionButtonFlatTextColor }" VerticalOptions="End" HorizontalOptions="Start"
                            IsVisible="{grial:OnOrientationBool
                                    Default='true',
                                    LandscapePhone='false'}" />

                            </Grid>
                        </Grid>
                    </grial:CardView>
                </Grid>

            </Grid>
            <!-- CARD Four -->
            <Grid Grid.Row="3" Padding="5,5,5,5" x:Name="gridDailyAmount">
                <Grid >
                    <grial:CardView
                                Style="{ StaticResource ResponsiveLandscapeMarginStyle }"

                                VerticalOptions="Fill"
                                CornerRadius="10"
                        Padding="0">
                        <Grid Margin="0"
                        ColumnSpacing="0"

                        Padding="{ grial:OnOrientationThickness Default='20', LandscapePhone='20,8'
                        }">

                            <Grid.RowDefinitions>
                                <RowDefinition
                                Height="*" />
                                <RowDefinition
                                Height="*" />

                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!--Text Daily dose-->
                            <Label Grid.Row="0" Margin="0"  Grid.Column ="0" Text="Dnešní dávka" FontSize="15" TextColor="{ DynamicResource CircleActionButtonFlatTextColor }" VerticalOptions="Start" HorizontalOptions="Start"
                            IsVisible="{grial:OnOrientationBool
                                    Default='true',
                                    LandscapePhone='false'}" />
                            <Label Grid.Row="0" Margin="0"  Grid.Column ="1" x:Name="amountOfWordForToday" FontSize="15" TextColor="{ DynamicResource CircleActionButtonFlatTextColor }" VerticalOptions="Start" HorizontalOptions="End"
                            IsVisible="{grial:OnOrientationBool
                                    Default='true',
                                    LandscapePhone='false'}" />
                            <!--Text Amount of words-->
                            <Label Grid.Row="1" Grid.Column="0" Margin="0" Text="Slovíček ve slovníku" FontSize="15" TextColor="{ DynamicResource CircleActionButtonFlatTextColor }" VerticalOptions="End" HorizontalOptions="StartAndExpand"
                            IsVisible="{grial:OnOrientationBool
                                    Default='true',
                                    LandscapePhone='false'}" />
                            <Label Grid.Row="1" Margin="0" Grid.Column="1" x:Name="amountOfWordsInDictionary"  FontSize="15" TextColor="{ DynamicResource CircleActionButtonFlatTextColor }" VerticalOptions="End" HorizontalOptions="End"
                            IsVisible="{grial:OnOrientationBool
                                    Default='true',
                                    LandscapePhone='false'}" />                      
                        </Grid>
                    </grial:CardView>
                </Grid>
            </Grid>
        </Grid>       
    </Grid>

У вас есть какие-либо предложения, как решить эту проблему?

Answer 1

Вам не нужно менять положение макета, и вам также не нужны четыре слова для управления Visible.

Вы можете изменить привязку в коде для достижения эффекта swap.

Вот простой пример.

Xaml

  <StackLayout>
        <Button Text="Swap" Clicked="Button_Clicked"/>

        <Grid VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button x:Name="button1" Text="{Binding EN}"/>
            <Button x:Name="button2" Grid.Row="1" Text="{Binding CZ}"/>
        </Grid>
    </StackLayout>

ViewModel

public class Modelss : INotifyPropertyChanged
{
    private string en;
    public string EN
    {
        get { return en; }
        set
        {
            en = value;

            OnPropertyChanged(nameof(en));
        }
    }


    private string cz;
    public string CZ
    {
        get { return cz; }
        set
        {
            cz = value;

            OnPropertyChanged(nameof(cz));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

Страница

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page10 : ContentPage
{

    Modelss model;

    public Page10()
    {
        InitializeComponent();

        model = new Modelss();
        model.EN = "bricho";
        model.CZ = "a belly";


        this.BindingContext = model;
    }


    bool isSwap=false;
    private void Button_Clicked(object sender, EventArgs e)
    {
        isSwap = !isSwap;

        button1.RemoveBinding(Button.TextProperty);
        button2.RemoveBinding(Button.TextProperty);


        if (isSwap)
        {
            button1.SetBinding(Button.TextProperty, "CZ");
            button2.SetBinding(Button.TextProperty, "EN");
        }
        else
        {
            button1.SetBinding(Button.TextProperty, "EN");
            button2.SetBinding(Button.TextProperty, "CZ");
        }                         
    }
}