xamarin - 交换页面底部和标题
问题描述
image image 我有一个页面，顶部显示一种语言的一个单词，底部显示翻译。我需要一个功能来交换这两个，所以翻译会转到顶部等等，但是用户应该能够通过同一个按钮返回并按初始顺序进行操作。
我试图删除我的网格并再次添加它们，但它不仅总是给我不同的定位结果，而且如果我重复该过程几次也会导致异常。
现在我已经用 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 并获取两次数据只会降低性能。我也想有一个新的页面。
xml
<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>
你有什么建议如何解决这个问题吗？
解决方案
你不需要改变布局的位置，也不需要四个字来控制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>
视图模型
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");
}
}
}
推荐阅读
- php - Laravel 7中间件“除外”规则在控制器中不起作用
- jquery - 使用 Selenium Python 执行带有 null 条件的 Jquery
- flutter - 在 Flutter 中导入自定义字体时出错
- go - Golang 中的指针地址
- javascript - 如何在 Antd 4 中使用 setFieldsValue 在 Form.List 中动态设置值？
- reactjs - React-Hooks 游戏生命周期中的问题
- button - 锁定附有脚本的绘图按钮
- matlab - 如何通过创新改进我的 SVM 算法？
- jmeter - Jmeter 堆大小增量
- sql - SQL 按 PostgreSQL 中的列合并表