WrapPanel子級采用父級的完整寬度

Question

我在WrapPanel中有兩個元素，一個按鈕和另一個WrapPanel。 該按鈕具有動態寬度。 問題在於子WrapPanel假定父WrapPanel的完整寬度，由於其左側的Button溢出到右側。

    <WrapPanel Height="200" VerticalAlignment="Top" Orientation="Vertical">
        <Button x:Name="BookCover" Click="ChangeImageFile" Margin="10">
            button style and content
        </Button>
        <WrapPanel Margin="10">
            <TextBox Text="New Book"></TextBox>
            <TextBox Text="Lorem ipsum dolor sit amet, eos iusto graece consetetur cu, an dicam nonumy volutpat qui, usu at nullam alienum. Est suas autem augue ad, integre vituperatoribus quo id, delicata gloriatur pro ei. Vel at nisl decore, ut eum altera commune. Nec at agam menandri, putant insolens suavitate ei mei, ea possim veritus mea. Nec nemore iuvaret detracto at, quodsi consectetuer pri id. Integre suscipit voluptua no pro, nonumes incorrupte ut mea. Delenit democritum vel in, quem tale everti vim id, id vis melius necessitatibus. Paulo signiferumque per te. Cu mei modus exerci partiendo, ad iudico adolescens mea, et stet integre civibus mea." TextWrapping="Wrap"></TextBox>
        </WrapPanel>
    </WrapPanel>

如何使其適合窗戶？

Answer 1

該問題可能是由Orientation="Vertical"引起的。 根據MSDN ，如果Orientation屬性設置為Horizo​​ntal，則子內容首先形成水平行，必要時形成垂直的行堆棧。 如果“方向”屬性設置為“垂直”，則子內容首先放置在垂直列中，並且如果沒有足夠的空間，則會發生換行並在水平維度中添加其他列。

在這里，您已將“方向”設置為“垂直”，而未將“包裝板”的默認寬度設置為。 這會導致問題。 包裝在垂直方向發生，並導致子內容從可見區域移出。 可以為包裝面板定義恆定的寬度，也可以適合窗口寬度，例如： Width="{Binding ElementName=Window, Path=Width}"或嘗試考慮刪除Orientation="Vertical" 。

編輯我正在提供解決您的問題的解決方案。 該方法是在父包裝面板內部使用Grid來將按鈕和內容之間的空間均等地划分為2個相等的列。 檢查是否有幫助。

<WrapPanel Height="200"
           VerticalAlignment="Top"
           Orientation="Vertical">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button x:Name="BookCover"
                Grid.Column="0"
                Margin="10"
                Click="ChangeImageFile">
            button style and content
        </Button>
        <WrapPanel Grid.Column="1" Margin="10">
            <TextBox Text="New Book" />
            <TextBox Text="Lorem ipsum dolor sit amet, eos iusto graece consetetur cu, an dicam nonumy volutpat qui, usu at nullam alienum. Est suas autem augue ad, integre vituperatoribus quo id, delicata gloriatur pro ei. Vel at nisl decore, ut eum altera commune. Nec at agam menandri, putant insolens suavitate ei mei, ea possim veritus mea. Nec nemore iuvaret detracto at, quodsi consectetuer pri id. Integre suscipit voluptua no pro, nonumes incorrupte ut mea. Delenit democritum vel in, quem tale everti vim id, id vis melius necessitatibus. Paulo signiferumque per te. Cu mei modus exerci partiendo, ad iudico adolescens mea, et stet integre civibus mea." TextWrapping="Wrap" />
        </WrapPanel>
    </Grid>
</WrapPanel>

Answer 2

正如我在評論中所說，使用Grid東西應該會很好：

<Window ...>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/> <!--to fit to the content-->
            <ColumnDefinition Width="*"/> <!--fill all the remaining-->
        </Grid.ColumnDefinitions>
        <Button x:Name="BookCover" Click="ChangeImageFile" Margin="10">
            button style and content
        </Button>
        <StackPanel Grid.Column="1" Margin="10">
            <TextBox Text="New Book"></TextBox>
            <TextBox Text="Lorem ipsum dolor sit amet, eos iusto graece consetetur cu, an dicam nonumy volutpat qui, usu at nullam alienum. Est suas autem augue ad, integre vituperatoribus quo id, delicata gloriatur pro ei. Vel at nisl decore, ut eum altera commune. Nec at agam menandri, putant insolens suavitate ei mei, ea possim veritus mea. Nec nemore iuvaret detracto at, quodsi consectetuer pri id. Integre suscipit voluptua no pro, nonumes incorrupte ut mea. Delenit democritum vel in, quem tale everti vim id, id vis melius necessitatibus. Paulo signiferumque per te. Cu mei modus exerci partiendo, ad iudico adolescens mea, et stet integre civibus mea." TextWrapping="Wrap"></TextBox>
        </StackPanel>
    </Grid>    
</Window>

結果：