C# 如何让Silverlight用户控件填充网页?

C# 如何让Silverlight用户控件填充网页?,c#,wpf,silverlight,user-interface,silverlight-4.0,C#,Wpf,Silverlight,User Interface,Silverlight 4.0,我正在Silverlight 4.0中构建一个web应用程序,我希望它能够扩展以填充web浏览器的宽度和高度。然而,我现在只能让它保持顶级中锋 我有一个网格,其中有3行、2列和控件s,填充单元格。因此,我只认为我需要网格扩展到用户控件的大小,而用户控件扩展到页面的大小。但是我该怎么做呢 示例XAML: <UserControl x:Class="RepentWeb.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/p

我正在Silverlight 4.0中构建一个web应用程序,我希望它能够扩展以填充web浏览器的宽度和高度。然而,我现在只能让它保持顶级中锋

我有一个
网格
,其中有3行、2列和
控件
s,填充单元格。因此,我只认为我需要
网格
扩展到
用户控件
的大小,而
用户控件
扩展到页面的大小。但是我该怎么做呢

示例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>

第二步: 感谢您提供的示例XAML。这比猜测容易得多

需要进行一些更改

  • 首先,您需要删除固定的 从外部到外部的宽度和高度 如前所述的网格
  • 接下来,左列应该是自动宽度,因为按钮行决定左侧的宽度
  • 右列应仅为1*(或仅为*)以使用剩余的列空间
  • 中间一行需要是自动(以适应按钮行)或固定像素高度。由于右侧有一个文本框与该行重叠,如果稍后添加拆分器,“自动”将导致问题,因此我建议将固定像素高度设置为40
  • 第一行和最后一行的高度都应为*。然后使用剩余高度的50%
  • 按钮应位于堆栈面板中(如另一个答案中所述),信息文本应位于该堆栈面板内的网格中
如果调整大小,则应根据以下图片进行更改:

更新的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 shell的总体大小由web宿主页面中的设置决定,默认为完整浏览器,因此问题可能是您的控件,或者更可能是控件中的网格

  • 确保在用户控件或内部网格中未指定固定大小。然后,这两个对象都默认拉伸到父对象
  • 例外情况是,如果您的所有列 如果是固定宽度,则网格将 折叠回总宽度 列,或者如果两个列在中都是“自动”宽度 哪种情况下柱子会倒塌 到中对象的宽度 他们(不要强迫他们伸展)
  • 确保至少有一个网格列为星形(例如1*),以确保它占用网格的剩余空间。如果您想让每列占据浏览器的50%,请将它们都设为“1*”宽度

如果你可以发布你的样本XAML,那么提供一个精确的补丁就更容易了。

有很多事情你应该考虑。1、删除任何固定宽度的项目,例如布置格线上的项目。(1020)

当您在带有数字的行和列定义中使用“*”语法时,这就像使用加权一样。它不像是最小尺寸或类似的东西。通常情况下,使用1/3可用宽度的东西将有两列,分别宽度为“”(或“1”)和“2*”。2*指示该列请求两倍的空间。(在本例中为2/3RD)使用372*和238*的高度对可用空间进行加权。如果希望控件具有最小大小,请为控件指定最小宽度/高度值。(他们将使用超出该大小的可用空间。)


一般来说,在网格中每个单元格使用一个控件是个好主意。如果要在单元格中放置多个控件,请将其设置为另一个布局控件,如StackPanel或Grid。堆栈面板加上左边距可以很好地安排按钮或文本元素等内容。使用边距在布局区域中定位多个控件相当混乱。如果希望控件排列成多行,或均匀地占用可用空间,则最好使用网格

添加了XAML,也将尝试您建议的方法。如果我将网格的行更改为
,并删除
宽度
高度
的值,高度将被排序,但如何才能正确设置列?谢谢你帮我。非常非常感谢你帮我解决这个问题。你应该得到比目前为止得到的更多的选票和代表。感谢你解释
*
符号的意义。