Silverlight 4: StackPanel не меняет размер, когда контент становится более узким

Question

Я использую Silverlight 4 с Blend 4.

У меня есть (горизонтальная) панель стека, которая включает в себя несколько текстовых полей и кнопку.Панель стека настроена на растяжение до размера, который использует контент.Текстовые поля тоже имеют автоматический размер.

Когда я добавляю текст в текстовые поля, размер текстового поля увеличивается, а размер стека увеличивается.Пока все хорошо.

Когда я удаляю текст из текстовых полей, размер текстового поля уменьшается (как исключено), но размер панели стека не увеличивается.

Есть ли хитрость, чтобы сделать панель стекаизменить размер, когда содержимое (текстовые поля) уменьшается?

Заранее спасибо, Фрэнк

Вот XAML для UserControl:

<Grid x:Name="LayoutRoot">
  <StackPanel x:Name="StackPanelBorder" Orientation="Horizontal">
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex">
        </TextBox>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True">
        </TextBox>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click">
        </Button>
  </StackPanel>
</Grid>

Answer 1

Если вы хотите, чтобы размер вашей StackPanel изменялся по горизонтали вместе с элементами внутри нее, вам необходимо изменить значение HorizontalAlignment со значения по умолчанию «Stretch» ​​на другое.

По умолчанию панель стека растягивается, чтобы заполнить все пространство своего родительского элемента управления, поскольку для HorizontalAlignment задано растяжение. Это мешает ему расти и уменьшаться в размере.

Вы захотите установить горизонтальное выравнивание на «Влево», «Вправо» или «Центр». Тогда панель стека будет только такой ширины, как элементы внутри нее. Но выбирайте мудро, потому что стекпанель пристыкуется к этой позиции внутри родительского элемента управления.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

Примечание. Если это не решит вашу проблему, значит, у вас проблема с родительским контролем, а не с StackPanel.

веб-сайт MSDN для горизонтального выравнивания

Answer 2

Я изменил ваш код, как показано ниже. Пожалуйста, проверьте.

<Grid x:Name="LayoutRoot">
  <ScrollViewer x:Name="PageScrollViewer" >
  <toolkit:WrapPanel x:Name="mywrapPanel" Orientation="Vertical" Width="{Binding ActualWidth, ElementName=LayoutRoot}">
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex" Width="{Binding ActualWidth, ElementName=mywrapPanel}">
        </TextBox>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True" Width="{Binding ActualWidth, ElementName=mywrapPanel}">
        </TextBox>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click" HorizontalAlignment="Right" Width="80" Margin="2">
        </Button>
  </toolkit:WrapPanel>
  </ScrollViewer>
</Grid>

Если вы используете Horizontal в Orientation WrapPanel, вам, возможно, придется использовать привязку свойства Height с ActualHeight. "Инструментарий" может быть включен в заголовок как xmlns: toolkit = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" Надеюсь, это поможет.

Answer 3

Вам было бы лучше использовать Grid для этого. Просто создайте Grid с 3 автоматическими столбцами, и он будет соответствовать размеру содержимого.

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBox x:Name="TextBoxCharacteristicName" TextWrapping="Wrap" Text="Tex" Grid.Column="0"/>
    <TextBox x:Name="TextBoxSep" TextWrapping="Wrap" Text="=" IsReadOnly="True" Grid.Column="1"/>
    <Button x:Name="ButtonRemove" Content="-" Click="ButtonAddOrRemove_Click" Grid.Column="2"/>
</Grid>

В большинстве случаев вам гораздо лучше использовать Grid. StackPanel - полезный элемент управления, но я часто чувствую, что он чрезмерно используется.

Answer 4

вам нужно что-то вроде:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">

Кроме того, я не думаю, что иметь текстовое поле, которое растягивается, - это хорошая идея, если только это не является обязательным требованием. Вы должны указать ширину текстового поля, чтобы оно не растягивалось.

Кроме того, если вышеупомянутое решение не работает, вы должны опубликовать свой xaml, чтобы он смог увидеть схему документа.