将画布拉伸到网格

时间:2012-03-27 10:22:40

标签: windows-phone-7 grid textblock stretch

我创建了一个自定义画布,我需要在两个文本块后面展开。

继承整个代码

                                    <Grid VerticalAlignment="Top" HorizontalAlignment="Right">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Canvas HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Grid.ColumnSpan="2" >
                                            <Rectangle Height="30" Stroke="Black" Width="70" RadiusY="17.167" RadiusX="17.167" Canvas.Top="15">
                                                <Rectangle.Fill>
                                                    <RadialGradientBrush>
                                                        <GradientStop Color="#FF096016"/>
                                                        <GradientStop Color="#FF0FEF6F" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Ellipse Height="5" Width="5" RenderTransformOrigin="0.5,0.45" Fill="White" Stroke="Gray" Canvas.ZIndex="2" Canvas.Left="33"/>
                                            <Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="17" Canvas.Top="18"/>
                                            <Ellipse Height="5" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A" Canvas.Left="48" Canvas.Top="18"/>
                                            <Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Stretch="Fill" UseLayoutRounding="False" Width="15.75" Canvas.Left="19.75" Canvas.Top="3.5"/>
                                            <Path Data="M128,209 L141.99998,192.16666" Height="17.833" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15" Canvas.Left="20" Canvas.Top="2.167"/>
                                            <Path Data="M143.5,192.16699 L158.08334,210.25" Height="19.083" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" Width="15.583" Canvas.Left="35.5" Canvas.Top="2.167"/>
                                        </Canvas>

                                        <TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
                                        <TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
                                    </Grid>

虽然水平对齐设置为拉伸,但没有发生任何事情。我错过了什么,请帮助。

提前致谢

EDITS

使用网格而不是画布

                                    <Grid VerticalAlignment="Top" HorizontalAlignment="Right">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid HorizontalAlignment="Stretch" Height="45" VerticalAlignment="Top" Width="70">
                                            <Rectangle Margin="0,15,0,0" Stroke="Black" RadiusY="17.167" RadiusX="17.167">
                                                <Rectangle.Fill>
                                                    <RadialGradientBrush>
                                                        <GradientStop Color="#FF096016"/>
                                                        <GradientStop Color="#FF0FEF6F" Offset="1"/>
                                                    </RadialGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Ellipse Height="5" Margin="33,0,32,0" VerticalAlignment="Top" Stroke="Gray" RenderTransformOrigin="0.5,0.45" Fill="White" Canvas.ZIndex="2"/>
                                            <Ellipse HorizontalAlignment="Left" Margin="17,18,0,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
                                            <Ellipse HorizontalAlignment="Right" Margin="0,18,17,22" Stroke="Black" Width="5" RenderTransformOrigin="-0.45,0.2" Fill="#FF99A19A"/>
                                            <Path Data="M143.5,193.5 C127.75,210.5 127.75,210.5 127.75,210.5" Height="17" Margin="19.75,3.5,34.5,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
                                            <Path Data="M128,209 L141.99998,192.16666" HorizontalAlignment="Left" Height="17.833" Margin="20,2.167,0,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15"/>
                                            <Path Data="M143.5,192.16699 L158.08334,210.25" HorizontalAlignment="Right" Height="19.083" Margin="0,2.167,18.917,0" Stretch="Fill" Stroke="#FF99A19A" UseLayoutRounding="False" VerticalAlignment="Top" Width="15.583"/>
                                        </Grid>

                                        <TextBlock Height="30" Margin="0,20,0,0" TextAlignment="Right" Name="priceTextblock" Text="{Binding Price}" VerticalAlignment="Top" FontFamily="Calibri" FontWeight="Bold"/>
                                        <TextBlock Width="50" Margin="5,20,0,0" Height="30" TextAlignment="Left" Name="currencyTextblock" Text="{Binding SelectedCurrency.code}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Calibri" FontWeight="Bold"/>
                                    </Grid>

1 个答案:

答案 0 :(得分:0)

您需要将列宽设置为*。它告诉我们获得所有可用空间

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>