У меня возникла проблема с общим форматированием для моего GridView.
Я пытаюсь отформатировать его в красивые квадраты. Я пока не уверен в их точной ширине / высоте.
У меня проблема в том, что мой текущий код XAML и C # дает следующий результат:
Пожалуйста, извините за ужасное форматирование текста, я ценю, что он выглядит не лучшим образом.
Что я пытаюсь получить, так это чтобы информация выглядела следующим образом. Мне пришлось нарисовать это вручную, потому что я буквально не могу поместить это в код, мне также нужно, чтобы эти квадраты не перекрывались с кнопкой меню навигации, которую они продолжают делать в настоящее время. Я смотрел на добавление поля, чтобы предотвратить наложение, хотя я не уверен, лучше ли это практично или нет? Вот желаемый результат:
В настоящее время я считаю, что у меня есть только настройка кода для отображения одного из этих "квадратов". Каждый квадрат будет иметь свою отдельную информацию от других. Информация здесь предназначена исключительно для тестирования.
Я создал файл UserData.cs в папке с именем «Данные», в которой хранится информация для пользователей. Этот код:
using System.Collections.ObjectModel;
namespace BudgetSheet.Data
{
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"
});
}
}
public class UserData
{
public string Name { get; set; }
public string PayDate { get; set; }
public string NumberOfItems { get; set; }
}
}
На этот код есть ссылка в его собственном GridView в MainPage.Xaml
Код GridView выглядит следующим образом:
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
Теперь, я ценю, что это может дать не все необходимое форматирование, чтобы помочь в этом, поэтому вот полный код Mainpage.Xaml, если необходимо. Я прошу прощения, это немного здоровенным:
<Page x:Class="BudgetSheet.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:BudgetSheet"
xmlns:mux="using:Windows.UI.Xaml.Controls"
xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
xmlns:data="using:BudgetSheet.Data"
RequestedTheme="Dark">
<Page.Resources>
<data:UserDataCollection x:Key="userDataCollection"/>
</Page.Resources>
<Frame Background="{StaticResource CustomAcrylicDarkBackground}">
<mux:NavigationView IsSettingsVisible="False"
PaneTitle=" Budget Sheet Menu "
x:Name="NavView"
IsBackButtonVisible="Collapsed"
PaneDisplayMode="LeftMinimal"
AlwaysShowHeader="True"
SelectionChanged="NavView_SelectionChanged">
<mux:NavigationView.MenuItems>
<StackPanel Orientation="Horizontal" UseLayoutRounding="False">
<AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync"/>
<AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_ClickAsync"/>
<AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync"/>
<AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click"/>
<AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync"/>
</StackPanel>
<mux:NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="HomeItem"
Content="HOME"
Tag="HOME_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<NavigationViewItemSeparator/>
<mux:NavigationViewItem Name="OverviewItem"
Content="ACCOUNT OVERVIEW"
Tag="OverView_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="BillsItem"
Content="BILLS"
Tag="Bills_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PeopleItem"
Content="BILL PAYERS"
Tag="BillPayer_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="TransfersItem"
Content="BANK TRANSFERS"
Tag="Transfers_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
<mux:NavigationViewItem Name="PayDatesItem"
Content="PAY DATES"
Tag="PayDates_Page"
FontSize="22"
HorizontalAlignment="Stretch"
FontWeight="Bold"
Foreground="#b880fc"/>
</mux:NavigationView.MenuItems>
<Frame x:Name="ContentFrame">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition/>
</TransitionCollection>
</Frame.ContentTransitions>
<GridView ItemsSource="{StaticResource userDataCollection}"
IsItemClickEnabled="True"
SelectionMode="Single">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<!-- This is the column definitions, every column needs defining -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<!-- This Is the contents of the Grid -->
<TextBlock Grid.Column="0" Text="{Binding Name}"/>
<TextBlock Grid.Column="1" Text="{Binding PayDate}"/>
<TextBlock Grid.Column="1" Text="{Binding NumberOfItems}"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Frame>
<NavigationView.PaneFooter>
<Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<SymbolIcon Symbol="Contact" Margin="8"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Text="Change User"/>
</StackPanel>
</Button>
</NavigationView.PaneFooter>
</mux:NavigationView>
</Frame>
</Page>
Я ценю все ваше время и терпение с этим. Если что-то по этому вопросу нуждается в разъяснении, пожалуйста, дайте мне знать. Я использую целевую версию инсайдера vuild 17723, которая может помочь с несколькими функциями