代码之家 › 专栏 › 技术社区 › Callum Rogers

如何使Silverlight用户控件填充网页?

silverlight-4.0 user-interface silverlight wpf c#

2

Callum Rogers · 技术社区 · 15 年前

我正在Silverlight4.0中构建一个webapp,我希望它扩展以填充Web浏览器的宽度和高度。但是,我现在只能让它保持在顶尖位置。

我有一个 Grid 有3行、2列和 Control 在这些充满细胞的内部。因此我只相信我需要 网格 拉伸到 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 回复 | 直到 15 年前

1

7

iCollect.it Ltd 15 年前

取2:

感谢您提供示例xaml。比猜测容易得多。

需要进行一些更改。

首先你需要移除固定的从外面算起的宽度和高度如前所述的网格。
接下来,左边的列应该是一个自动宽度,因为按钮行决定了左边的宽度。
右边的列应该是1*(或仅仅是*)以耗尽剩余的列空间。
中间行需要是自动(以适应按钮行)或固定像素高度。由于右侧有一个文本框与该行重叠,如果稍后添加拆分器,则自动将导致问题,因此我建议固定像素高度为40。
第一行和最后一行的高度都应该是*。然后他们使用剩余高度的50%。
按钮应位于堆栈面板(如另一个答案中所述)中,信息文本应位于该堆栈面板内的网格中。

如果调整大小,它们应根据以下图片进行更改:

已更新下面的XAML:。

<grid x:name=“layoutRoot”background=“white”>
<grid horizontallight=“Stretch”name=“grid1”verticalaligent=“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”/>
<列定义/>
</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\u keydown”isabstop=“true”/>gt;
<textbox grid.column=“1”watermark=“output”acceptsreturn=“true”margin=“9,6,15,8”name=“tboutput”horizontalscrollbarvisibility=“auto”verticalscrollbarvisibility=“auto”verticalalightment=“stretch”fontfamily=“Courier New”fontsize=“12”/>gt;
<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”verticalalightment=“stretch”fontfamily=“Courier New”fontsize=“12”/>
<textbox grid.row=“2”grid.column=“0”watermark=“命令行参数,每行一个。用引号括起来的字符串/数组“acceptsreturn=“true”horizontalscrollbarvisibility=“auto”margin=“12,8,8,6”name=“tbargs”verticalalightment=“stretch”verticalscrollbarvisibility=“auto”fontfamily=“Courier New”fontsize=“12”/>gt;
<stackpanel orientation=“horizontal”grid.row=“1”d:layoutOverrides=“width”horizontallight=“left”margin=“12,0,0,0”>
<button content=“run”height=“23”margin=“5,0,0,0”x:name=“btnrun”verticalalightment=“center”width=“75”单击“btnrun单击”/>
<button content=“step forward”height=“23”margin=“5,0,0,0”x:name=“btnstep”verticalalightment=“center”width=“115”单击“btnstep单击”/>
<button content=“stop”height=“23”horizontallight=“left”margin=“5,0,0,0”x:name=“btnstop”verticalalight=“center”width=“75”单击“btnstop\u click”isEnabled=“false”/>gt;
<button content=“clear all”height=“23”margin=“5,0,0,0”x:name=“btnlear”verticalalightment=“center”width=“75”单击“btnlear\u click”/>
<grid width=“107”margin=“13,0,0,0”>
<local:watermarkedTextBox height=“23”horizontallight=“left”x:name=“lblcurrpos”text=“当前位置:”verticalalightment=“top”/>
<local:watermarkedTextBox horizontallight=“left”margin=“0,17,0,0”x:name=“lblchar”text=“char:0”verticalaligent=“top”d:layoutOverrides=“horizontallight”/>gt;
<local:watermarkedTextBox height=“23”horizontallight=“left”margin=“57,17,0,0”x:name=“lblsymbol”text=“symbol:”verticalaligment=“top”/>gt;
和/格栅& GT;
</stackpanel>
和/格栅& GT;
和/格栅& GT;
< /代码> 

取1:

Silverlight外壳的总体大小由Web宿主页中的设置决定,默认为全浏览器,因此问题很可能是您的控件,或者更可能是控件内的网格。



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



如果您可以发布示例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外壳的整体大小由Web宿主页中的设置决定,默认为全浏览器,因此问题很可能是您的控件,或者更可能是控件中的网格。


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


如果您可以发布示例xaml,则更容易提供精确的修复。

2

Steve Py 15 年前

有很多事情你应该考虑。#1,删除任何固定宽度的项,如布局网格上的项。(1020)

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

一般来说,网格中每个单元格使用1个控件是一个好主意。如果要在单元格中定位多个控件,请创建另一个布局控件,如StackPanel或网格。堆叠面板加上左边距对按钮或文本元素等的排列很有效。使用页边距在布局区域中定位多个控件相当混乱。如果希望控件排列成多行,或者平均占用可用空间,则最好使用网格。