如何使用MVVM通过我的视图后面的代码删除/显示StackLayout

时间:2018-10-10 02:55:13

标签: c# xaml xamarin mvvm xamarin.forms

您想根据构造函数中评估的属性的值隐藏StackLayout,但是xamarin隐藏时,不会空白并且不会向上上传较低的元素,因此我将通过后面的代码删除该元素(我正在使用MVVM)

Example

但是我不知道如何构造代码,以便评估加载Vista时是否消除了StackLayout。

在我看来,我在评估条件后使用X:名称来标识要消除或显示的元素。

MyView.XAML:

        <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"           
                     BindingContext="{Binding Main, Source={StaticResource Locator}}"
                     x:Class="AppValora.Views.Sisquim.VerSisquimView">

     <StackLayout       
                    Orientation="Horizontal"
                  HorizontalOptions="CenterAndExpand"
                    VerticalOptions="Start">

                    <Image
                        HorizontalOptions="Center"
                        Source="{Binding ImageRombo}"                 
                       HeightRequest="160"
                       WidthRequest="160"
                        IsVisible="{Binding IsVisibleImagenRombo}">                
                    </Image> 
                    <Image 
                        HorizontalOptions="Center"
                        Source="cuadro_nch"                  
                        HeightRequest="160"
                       WidthRequest="160">
                     </Image>
                </StackLayout>     

// STACKLAYOUT YOU WANT TO ELIMINATE
         <StackLayout 
            x:Name="StackIsVisible">                
                            <Image 
                                Source="{Binding ImageRomboDos}"                 
                               HeightRequest="160"
                               WidthRequest="160"
                               IsVisible="{Binding IsVisibleImagenRombo}">
                            </Image>
            </StackLayout>

        </ContentPage>

在ViewModel中,我收到一个参数,然后在有条件的条件下进行评估

MyViewModel.CS:

public VerSisquimViewModel(SqsHelper sqsHelper)
        {
           if (sqsHelper.RSEC == null)
            {
                IsVisibleLabelRomboImagenDos = false;
            }        

        }

我可以在我的代码隐藏中做什么魔术,以便在满足条件时消除StackLayout并消失该空白?

我现在有...。

MyView.cs(代码隐藏):

public partial class MyView : ContentPage
{
    StackLayout hiddenStackLayout;

    public VerSisquimView ()
    {
        NavigationPage.SetBackButtonTitle(this, "");
        StackIsVisible.Children.RemoveAt(1);
        InitializeComponent();

    }

}

启动此页面时,如何从后面的代码中更改属性的值?

在MVVM模式下使用代码是不好的做法吗?

我该如何解决?对我有帮助吗?

2 个答案:

答案 0 :(得分:1)

  

在MVVM模式下使用代码是不好的做法吗?

如果代码与视图相关,则不必要。有时您只是无法避免隐藏代码中的代码。 通常要记住的规则,当您开始使用视图时,管理事情会变得很麻烦。如果您找到一种利用平台的方法(在本例中为Xaml),请让它为您完成工作。

关于可见性的元素在屏幕上呈现。用户只是看不到它。这就是占用空间的原因。有时可见性会起作用,而其他时候则不会那么重要。

在这种情况下,您可以避免代码隐藏在代码中,并坚持使用您的VM。

我建议使用网格并使用转换器来隐藏网格行。当我说隐藏行时,我的意思是将行的高度设置为0。因此它已呈现,但我们将其折叠。我只添加了两行,您可以添加更多行以容纳更多您认为合适的内容。

编辑:添加了示例名称​​空间。如果您使用的是Visual Studio,则应该有智能感知。您必须添加本地名称空间,以便xaml引擎可以找到转换器类。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"          
                     xmlns:converter="clr-namespace:DataBindingDemos" <-- set the appropriate value
                     BindingContext="{Binding Main, Source={StaticResource Locator}}"                     
                     x:Class="AppValora.Views.Sisquim.VerSisquimView">
    <ContentPage.Resources>
        <converter:BoolToGridRowVisibilityConverter key="BoolToGridRowVisibilityConverter">
    </ContentPage.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="{Binding IsStackVisible, Converter={StaticResource BoolToGridRowVisibilityConverter}}" />
        </Grid.RowDefinitions>
         <StackLayout   
                    Grid.Row="0"    
                    Orientation="Horizontal"
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="Start">

                    <Image
                        HorizontalOptions="Center"
                        Source="{Binding ImageRombo}"                 
                       HeightRequest="160"
                       WidthRequest="160"
                        IsVisible="{Binding IsVisibleImagenRombo}">                
                    </Image> 
                    <Image 
                        HorizontalOptions="Center"
                        Source="cuadro_nch"                  
                        HeightRequest="160"
                       WidthRequest="160">
                     </Image>
                </StackLayout>     

         <!-- STACKLAYOUT YOU WANT TO ELIMINATE -->
        <StackLayout    Grid.Row="1" 
                        x:Name="StackIsVisible">                
                            <Image 
                                Source="{Binding ImageRomboDos}"                 
                               HeightRequest="160"
                               WidthRequest="160"
                               IsVisible="{Binding IsVisibleImagenRombo}">
                            </Image>
            </StackLayout>
    </Grid>
</ContentPage>

添加转换器

public class BoolToGridRowVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? new GridLength(1, GridUnitType.Auto) : new GridLength(0);
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException("Only one way bindings are supported with this converter");
    }}
}

有关更多信息,请参见Xamarin论坛上的post

答案 1 :(得分:0)

您可以将IsVisible =“ {Binding IsVisibleImagenRombo}”放到StackIsVisible堆栈布局中,以便整个空间都将被擦除。