UWP / C # ItemsControl Multiple Boxes? - PullRequest
0 голосов
/ 31 августа 2018

Мне до сих пор оказывали большую помощь в создании правильного форматирования для панели ItemsControl, и я ценю, что это сообщество пока помогает мне в устранении проблем с кодированием. В настоящее время я нахожусь на довольно небольшом препятствии, где я пытаюсь выяснить, как создать несколько блоков в одном и том же ItemsControl. В настоящее время общий вид выглядит следующим образом:

enter image description here

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

enter image description here

Вот мой код в настоящее время (все это вложено во фрейм):

<ItemsControl ItemsSource="{StaticResource userDataCollection}" Margin="40,40,40,725"  Width="Auto" Height="310">
                    <!-- Changing Orientation of VirtualizingStackPanel -->
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Horizontal"/>                            
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <!-- Change header for ItemsControl -->
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <Border Background="{StaticResource CustomAcrylicDarkBackground}">
                                <StackPanel>
                                    <TextBlock Text="Accounts At A Glance" FontSize="28" Foreground="#b880fc" Padding="12"/>
                                    <ItemsPresenter/>
                                </StackPanel>
                            </Border>
                        </ControlTemplate>
                    </ItemsControl.Template>


                    <!-- Template for each card-->
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="240" Height="240" Background="Gray" Margin="30,0,0,0" VerticalAlignment="Center" Padding="4">

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

                                <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                                <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                                <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>

                            </Grid>


                        </DataTemplate>

                    </ItemsControl.ItemTemplate>
                </ItemsControl>

Я действительно извиняюсь за это, я пытаюсь выучить как можно больше, сколько смогу. Я в основном увлекаюсь форматированием XAML и включаю учебные материалы в свой проект: / Любая помощь будет потрясающей

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Это прекрасно сейчас.

Я идиот.

Мне по существу нужно было отделить информацию, представленную в классе UserData.cs. Я не понимал, как информация читается, но сейчас понимаю. XAML остался нетронутым, так как он работает в настоящее время для того, что мне нужно. Это будет обновление, чтобы следовать формату MVVM, как упомянуто Mac. Вот класс UserData.CS, расположенный внутри папки данных:

using System.Collections.ObjectModel;

namespace BudgetSheet.Data
{
    public class UserData
    {
        public string Name { get; set; }
        public string PayDate { get; set; }
        public string NumberOfItems { get; set; }
    }

    class UserDataCollection : ObservableCollection<UserData>
    {
        public UserDataCollection()
        {

            // Placeholder, needs to be replaced with CSV or Database information
            this.Add(new UserData()
            {
                Name = "Selected Username",
                PayDate = "Friday",
                NumberOfItems = "ItemAmount Placeholder"
            });
            // Placeholder for user 2
            this.Add(new UserData()
            {
                Name = "Selected Username 2",
                PayDate = "Friday 2",
                NumberOfItems = "ItemAmount Placeholder 2"
            });
            // Placeholder for user 3
            this.Add(new UserData()
            {
                Name = "Selected Username 3",
                PayDate = "Friday 3",
                NumberOfItems = "ItemAmount Placeholder 3"
            });
        }
    }
}

Вот что было до этого и почему возникли проблемы с отображением информации:

using System.Collections.ObjectModel;

namespace BudgetSheet.Data
{
    public class UserData
    {
        public string Name { get; set; }
        public string PayDate { get; set; }
        public string NumberOfItems { get; set; }
    }

    class UserDataCollection : ObservableCollection<UserData>
    {
        public UserDataCollection()
        {

            // Placeholder, needs to be replaced with CSV or Database information
            this.Add(new UserData()
            {
                Name = "Selected Username",

            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {

                PayDate = "Friday",

            });
            // Placeholder for user selected PayDate
            this.Add(new UserData()
            {

                NumberOfItems = "ItemAmount Placeholder"
            });
        }
    }
}

В настоящее время это решение не обеспечивает большой гибкости, но оно работает для форматирования. Отмечается как решено закрыть билет

0 голосов
/ 31 августа 2018

У меня есть альтернативный подход к вашей проблеме. При этом используется «полу» подход MVVM (просмотрите сеть и изучите этот шаблон).

MainPageViewModel.cs

public class MainPageViewModel : INotifyPropertyChanged
{
    private ObservableCollection<User> _userCollection;
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<User> UserCollection
    {
        get => _userCollection;
        set
        {
            _userCollection = value;
            NotifyProperyChanged();
        }
    }

    private void NotifyProperyChanged([CallerMemberName]string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void LoadData()
    {
        UserCollection = new ObservableCollection<User>
        {
            new User
            {
                Name = "John Doe",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
            new User
            {
                Name = "John Doe 2",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
            new User
            {
                Name = "John Doe 3",
                PayDate = DateTime.Now,
                NumberOfItems = 1
            },
        };
    }
}

Вид (временно избавился от стиля):

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:App1.ViewModels"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    Loaded="MainPage_OnLoaded">

    <Page.DataContext>
        <vm:MainPageViewModel/>
    </Page.DataContext>

    <Grid>
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding UserCollection, Mode=TwoWay}" Margin="15"  Width="Auto" Height="310">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <!-- Template for each card-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="200" Height="100" Background="Gray" Margin="15,0,0,0" VerticalAlignment="Center" Padding="4">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="{Binding Name}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="24"/>
                            <TextBlock Grid.Row="1" Text="{Binding PayDate}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14" />
                            <TextBlock Grid.Row="2" Text="{Binding NumberOfItems}" HorizontalAlignment="Center" TextAlignment="Center" Width="220" FontSize="14"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Page>

Код обзора:

namespace App1
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        public MainPageViewModel VM => (MainPageViewModel) DataContext;

        private void MainPage_OnLoaded(object sender, RoutedEventArgs e)
        {
            VM.LoadData();
        }
    }

}

Выход: enter image description here Следующие шаги:

  • Примените свой стиль. Изучите, как ограничить столбцы сетки.

  • Улучшение кода кроме того, в MVVM у вас не должно быть реализаций на код позади, так что учитесь для ICommand, Microsoft.Xaml.Interactivity

Надеюсь, это поможет.

...