Как сделать так, чтобы Silverlight UserControl заполнял веб-страницу? - PullRequest
2 голосов
/ 26 августа 2010

Я создаю веб-приложение в Silverlight 4.0, и мне бы хотелось, чтобы оно расширялось до ширины и высоты веб-браузера. Тем не менее, я могу только заставить его оставаться в центре в данный момент.

У меня есть Grid с 3 строками, 2 столбцами и Control s внутри, которые заполняют ячейки. Поэтому я считаю, что мне нужно Grid, чтобы растянуть до размера UserControl и UserControl до размера страницы. Но как мне это сделать?

Пример XAML:

<UserControl x:Class="RepentWeb.MainPage"
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:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
mc:Ignorable="d"
d:DesignHeight="740" d:DesignWidth="1020" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

<Grid x:Name="LayoutRoot" Background="White" Width="1020">
    <Grid Height="740" HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" Width="1020" ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="372*" />
            <RowDefinition Height="40*" />
            <RowDefinition Height="328" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="415*" />
            <ColumnDefinition Width="411*" />
        </Grid.ColumnDefinitions>
        <local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
        <local:WatermarkedTextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <local:WatermarkedTextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <local:WatermarkedTextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
        <Button Grid.Row="1" Grid.Column="0" Content="Run" Height="23" HorizontalAlignment="Left" Margin="12,8,0,0" Name="btnRun" VerticalAlignment="Top" Width="75" Click="btnRun_Click"  />
        <Button Grid.Row="1" Grid.Column="0" Content="Step Forward" Height="23" HorizontalAlignment="Left" Margin="93,8,0,0" Name="btnStep" VerticalAlignment="Top" Width="115" Click="btnStep_Click" />
        <Button Grid.Row="1" Grid.Column="0" Content="Stop" Height="23" HorizontalAlignment="Left" Margin="214,8,0,0" Name="btnStop" VerticalAlignment="Top" Width="75" Click="btnStop_Click" IsEnabled="False" />
        <Button Grid.Row="1" Content="Clear All" Height="23" HorizontalAlignment="Right" Margin="0,8,142,0" Name="btnClear" VerticalAlignment="Top" Width="75" Click="btnClear_Click" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,0,0,0" Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,17,0,0" Name="lblChar" Text="Char: 0" VerticalAlignment="Top" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="433,17,0,0" Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
    </Grid>
</Grid>
</UserControl>

Ответы [ 2 ]

7 голосов
/ 26 августа 2010

дубль 2:

Спасибо за пример XAML. Делает это намного проще, чем угадывать.

Необходимо внести ряд изменений.

  • Сначала нужно удалить исправленный ширина и высота от вашего внешнего сетки, как упоминалось ранее.
  • Следующий левый столбец должен иметь автоматическую ширину, поскольку ряд кнопок определяет ширину левой стороны.
  • Правый столбец должен быть просто 1 * (или просто *), чтобы использовать оставшееся пространство столбца.
  • Средний ряд должен быть либо автоматическим (чтобы соответствовать ряду кнопок), либо фиксированной высотой пикселя. Поскольку у вас есть текстовое поле справа, перекрывающее эту строку, auto вызовет проблемы, если вы добавите разделитель позже, поэтому я рекомендую фиксированную высоту пикселя 40.
  • Первый и последний ряд должны быть * по высоте. Затем они используют 50% оставшейся высоты.
  • Кнопки должны находиться на панели стека (как упоминалось в другом ответе), а информационный текст - в сетке на панели стека.

Если вы измените размер, они должны измениться согласно рисункам ниже: alt text

Обновлен XAML ниже:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*" />
            <RowDefinition Height="40" />
            <RowDefinition Height="0.5*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="510" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
        <TextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <TextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <TextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
        <StackPanel Orientation="Horizontal" Grid.Row="1" d:LayoutOverrides="Width" HorizontalAlignment="Left" Margin="12,0,0,0">
            <Button Content="Run" Height="23" Margin="5,0,0,0" x:Name="btnRun" VerticalAlignment="Center" Width="75" Click="btnRun_Click"  />
            <Button Content="Step Forward" Height="23" Margin="5,0,0,0" x:Name="btnStep" VerticalAlignment="Center" Width="115" Click="btnStep_Click" />
            <Button Content="Stop" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" x:Name="btnStop" VerticalAlignment="Center" Width="75" Click="btnStop_Click" IsEnabled="False" />
            <Button Content="Clear All" Height="23" Margin="5,0,0,0" x:Name="btnClear" VerticalAlignment="Center" Width="75" Click="btnClear_Click" />
            <Grid Width="107" Margin="13,0,0,0">
                <local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" x:Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
                <local:WatermarkedTextBox HorizontalAlignment="Left" Margin="0,17,0,0" x:Name="lblChar" Text="Char: 0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment" />
                <local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" Margin="57,17,0,0" x:Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
            </Grid>
        </StackPanel>
    </Grid>
</Grid>

Взять 1:

Общий размер оболочки Silverlight определяется настройками на странице веб-хостинга и по умолчанию использует полный браузер, поэтому проблема, скорее всего, заключается в вашем контроле или, скорее, в сетке внутри элемента управления.

  • Убедитесь, что у вас нет фиксированного размера, указанного в пользовательском элементе управления или во внутренней сетке. Тогда оба по умолчанию растягиваются на родителя.
  • Исключение составляют все ваши столбцы. фиксированной ширины, то сетка будет свернуть обратно к общей ширине столбцы, или если оба "авто" ширина в в этом случае столбцы рухнут на ширину объектов внутри их (и не заставляйте их растягиваться).
  • Убедитесь, что хотя бы один из ваших столбцов сетки имеет звездообразный размер (например, 1 *), чтобы он занимал оставшееся пространство сетки. Если вы хотите, чтобы каждый столбец занимал 50% браузера, сделайте их шириной 1 *.

Если вы можете опубликовать свой образец XAML, вам будет проще предоставить точное исправление.

2 голосов
/ 26 августа 2010

Есть несколько вещей, которые вы должны рассмотреть.# 1, удалите все элементы фиксированной ширины, например, в сетке макета.(1020)

Когда вы используете синтаксис «*» в определениях строк и столбцов с числами, это похоже на использование взвешивания.Это не минимальный размер или что-то в этом роде.Как правило, для того, чтобы что-то использовать, 1/3 доступной ширины будет иметь два столбца с шириной «» (или «1 ») и «2 *» соответственно.2 * говорит, что столбец для запроса удвоить пробел.(В этом случае 2 / 3rds) с использованием высот 372 * и 238 * взвешиваются для доступного пространства.Если вы хотите, чтобы элементы управления имели минимальный размер, присвойте им значения MinimumWidth / Height.(Они будут использовать доступное пространство сверх того размера, который доступен.)

Как правило, рекомендуется использовать 1 элемент управления на ячейку в сетке.Если вы хотите разместить более одного элемента управления в ячейке, создайте для этого другого элемента управления макета, например, StackPanel или Grid.Панели стека и левые поля хорошо подходят для упорядочивания таких элементов, как кнопки или текстовые элементы.Расположение нескольких элементов управления в области макета с использованием полей довольно грязно.Если вы хотите, чтобы элементы управления располагались в несколько рядов или равномерно занимали доступное пространство, предпочтительнее использовать Grid.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...