Блог

Главная - Вопросы по программированию - Элементы управления TextBlock, перекрывающиеся в Grid WPF

Элементы управления TextBlock, перекрывающиеся в Grid WPF

#wpf #xaml

#wpf #xaml

Вопрос:

Я пытаюсь создать простое приложение со списком задач с помощью WPF / XAML. У меня есть список, в котором отображаются все задачи. Вот мой код:

 <Window x:Class="TodoListWPF.Homepage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TodoListWPF"
        mc:Ignorable="d"
        Title="Homepage" Height="450" Width="800">
    <Grid Margin="10,130,10,10">
        <TextBlock HorizontalAlignment="Center" Margin="0,-116,0,0" Text="Welcome to TaskList" FontSize="20" TextWrapping="Wrap" VerticalAlignment="Top" Height="33" Width="180" />
        <ListBox Margin="0,-48,0,0" x:Name="TaskListBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding DueDate}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

И кодирование:

 public partial class Homepage : Window
{
    public Homepage()
    {
        InitializeComponent();
        List<Task> tasks = new List<Task>();
        tasks.Add(new Task("Buy RTX 3070", 12, 3, 2021, "Buy a new Asus EK RTX 3070 and install it into the custom loop")); //Test task
        TaskListBox.ItemsSource = tasks;
    }
}

Я ожидаю простой список из 1 элемента с именем и датой выполнения задачи, но вот мой вывод:
Имя задачи и дата выполнения перекрываются

Как я могу исправить перекрывающиеся элементы?

Ответ №1:

Вы не указали Grid.Row на своем TextBox , и в этом случае оба TextBoxes помещаются в одну и ту же (первую) строку Grid .

Попробуйте это исправить.

 <Grid>
    <Grid.RowDefinitions>
       <RowDefinition></RowDefinition>
       <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Text="{Binding Name}"/>
    <TextBlock Grid.Row="1" Text="{Binding DueDate}"/>
</Grid>

Если вы хотите иметь Name и DueDate в той же строке, вы можете заменить Grid на StackPanel 

 <DataTemplate>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}"/>
        <TextBlock Text="{Binding DueDate}"/>
    </StackPanel>
</DataTemplate>
Метки: