樣式動態創建的TextBoxes

Question

我正在使用MVVM模式，這對我來說真的很新。 我點擊“添加標題”，然后文本框顯示，當我點擊“添加問題”時也會發生同樣的情況。 錯誤的是它們恰好低於對方。 當他們點擊“添加標題”時，我希望文本框顯示“20”左邊的邊距，然后當我點擊“添加問題”時，我希望邊距顯示為“40” 。 它們還需要在所有文本框之間留出“20”的空格，因此不會直接位於文本框的下方。

XAML代碼：

<Grid>

<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
    <Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />

    <StackPanel>

        <ItemsControl ItemsSource="{Binding Title}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <ItemsControl ItemsSource="{Binding Question}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </StackPanel>


</Grid>

我試圖添加Padding屬性，但它使文本框的高度更大，我也嘗試了Margin但所有文本框都是動態創建的。

Answer 1

定義外觀結構的一種好方法是使用Grid控件，指定行和列。 嘗試這樣的事情：

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ItemsControl Grid.Column="0"  ItemsSource="{Binding Title}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

    <ItemsControl  Grid.Column="1" ItemsSource="{Binding Question}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Answer 2

嘗試這個

根據您的要求調整保證金

<Grid>
    <Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
    <Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />

    <StackPanel>

        <ItemsControl ItemsSource="{Binding Title}">
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="FrameworkElement.Margin" Value="20,20,0,0"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

        <ItemsControl ItemsSource="{Binding Question}">
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="FrameworkElement.Margin" Value="40,20,0,0"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </StackPanel>


</Grid>