Visual Studio 仅使用WPF折叠GUI

oxiaedzo  于 2023-02-16  发布在  其他
关注(0)|答案(3)|浏览(145)

当我点击另一个GUI元素时,是否有方法显示/隐藏GUI?我正在使用MAUI GUI和CollectionView生成按钮列表。当我点击一个按钮时,我想显示该项目的选项1和2,如果我点击另一个按钮,我想显示它的选项并隐藏旧的选项。
我使用MVVM,这就是为什么我只要求GUI选项。

列表代码:

<CollectionView.ItemTemplate>

                <DataTemplate x:DataType="models:MyItem">
                        <StackLayout>
                    <Frame Margin="10,5">

                        <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                </Grid.RowDefinitions>

                            <Label Text="{Binding Name}"/>
                            <Label Grid.Column="1" Text="{Binding Number}" HorizontalTextAlignment="End"/>
                            <Label Grid.Row="1" Text="{Binding Description}"/>

                            </Grid>

                    </Frame>

                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>

                                <Button Grid.Row="2" Text="Option 1" Margin="5"/>

                                <Button Grid.Row="2" Grid.Column="1" Text="Option 2" Margin="5"/>

                            </Grid>

                        </StackLayout>

                    </DataTemplate>

            </CollectionView.ItemTemplate>
            

        </CollectionView>
fivyi3re

fivyi3re1#

我将在这里指出您的几个选项,使用“MVVM和UI only”
1.您可以使用触发器。https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/triggers?view=net-maui-7.0
有了这个,你可以让你的UI依赖于你的模型的属性。
1.您可以使用样式和可视化状态。https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-7.0
使用此选项,您可以根据UI元素的可视状态更改其外观。例如,如果您决定使用项目的“已选择”属性。
1.您可以使用替代项来显示每个项目的其他UI元素。例如-SwipeView.https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/swipeview?view=net-maui-7.0
1.您可以尝试编写自己的可重用ControlTemplate. https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/controltemplate?view=net-maui-7.0
1.你可以得到第三方控件。下面是一个CommunityToolkit,它做的事情非常相似:https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/expander
处理你的问题的方法真的有这么多,你也可以按照Jason说的做,只需绑定IsVisible,手动处理即可。

qojgxg4l

qojgxg4l2#

据我所知,你的案例需要实现的行为可以用短语***“只有一个”来表达。
Jason的解决方案(bool属性绑定到您控件的IsVisible)会起作用,但是沿着按钮数量的增加,它会变得混乱-您需要处理
每个按钮及其绑定属性
*-为什么要这样做?
另外,我相信你最终会在另一个View中再次需要这个,所以你必须重复-它不是真的,不是吗?
我建议使用更多的可重用方法。

1.创建转换器类:

[ValueConversion(typeof(object), typeof(bool))]
public class IsEqualConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return targetType == typeof(bool)
            ? Equals(value, parameter)
            : throw new InvalidOperationException("Converter can only convert to value of type bool.");
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new InvalidOperationException("Invalid call - one way only");
    }
}

2.在所需的View中引用转换器:

<ContentPage.Resources>
    <converters:IsEqualConverter x:Key="IsEqualConverter" />    
</ContentPage.Resources>

3.声明一个触发器property来保存(为简化本例)当前可见控件的名称:

public string CurrentlyExpandedPopup
{
    /// Note, i'm using my own getters and settes, which automatically raise PropertyChanged.
    /// You have to do that in the setter if using different approach.
    get { return GetValue<string>(); }
    set { _ = SetValue(value); }
}

4.使用转换器将控件的IsVisible绑定到以前创建的属性:

IsVisible="{Binding CurrentlyExpandedPopup, Converter={StaticResource IsEqualConverter}, ConverterParameter='Button1', UpdateSourceEventName=PropertyChanged}"

值转换器主要检查绑定属性是否等于其提供的参数。例如,如果您从ViewModel代码中将CurrentlyExpandedPopup设置为“Button 1”,则它将仅返回true到那些Binding示例,其中其参数被检查为“Button 1”。

总结:必须使用您的ViewModel,但该方法相当干净并且干燥CodeBehind免费,仅MVVM

c86crjj0

c86crjj03#

您可以添加附加到框架的TapGestureRecognizer

<ScrollView>
    <CollectionView>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:MyItem">
                <StackLayout>
                    <Frame Margin="10,5">
                        <Frame.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                        </Frame.GestureRecognizers>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Label Text="{Binding Name}"/>
                            <Label Grid.Column="1" Text="{Binding Number}" HorizontalTextAlignment="End"/>
                            <Label Grid.Row="1" Text="{Binding Description}"/>
                        </Grid>
                    </Frame>
                    <Grid IsVisible="false">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Row="2" Text="Option 1" Margin="5"/>
                        <Button Grid.Row="2" Grid.Column="1" Text="Option 2" Margin="5"/>
                    </Grid>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ScrollView>

以及第.xaml.cs页:

public partial class NewPage : ContentPage
{
    Grid grid = new Grid();
    public NewPage() 
    { 
        InitializeComponent();
        ... 
    }
    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        grid.IsVisible = false;

        Frame frame = (Frame)sender;
        StackLayout stacklayout = (StackLayout)frame.Parent;
        grid = (Grid)stacklayout.Children[stacklayout.Children.Count - 1];

        grid.IsVisible = true;
    }
}

相关问题