滚动查看器不适用于Windows Phone 8中的画布

时间:2014-01-11 12:44:02

标签: wpf xaml canvas scrollview

我有一个xaml文件,其中我用scroll viewer声明了canvas

执行应用程序后,我只能看到10个画布(9个和一半),当我滚动到那里时,我可以看到所有9个半画布的移动,但屏幕上不再显示画布。 在第10幅画布(9.5)之后,我只看到黑色背景

<ScrollViewer Grid.Row="1">
        <StackPanel x:Name="ContentPanel" Height="607" Width="456">

<Canvas x:Name="canvas1" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub1" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 001" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date1" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author1" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas2" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub2" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 002" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date2" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author2" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas3" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub3" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 003" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date3" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author3" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas4" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub4" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 004" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date4" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author4" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas5" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub5" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 005" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date5" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author5" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas6" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub6" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 006" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date6" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author6" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas7" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub7" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 007" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date7" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author7" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas8" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub8" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 008" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date8" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author8" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas9" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub9" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 009" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date9" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author9" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas10" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub10" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0010" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date10" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author10" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas11" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub11" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0011" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date11" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author11" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas12" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub12" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0012" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date12" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author12" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas13" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub13" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0013" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date13" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author13" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas14" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub14" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0014" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date14" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author14" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>
<Canvas x:Name="canvas15" Height="65" Background="Black" Margin="-13,0,-14,0">
    <TextBlock x:Name="sub15" Canvas.Left="10" TextWrapping="Wrap" Text="My Heading 0015" Width="309" Foreground="White" FontSize="21.333"/>
    <TextBlock x:Name="date15" Canvas.Left="374" TextWrapping="Wrap" Text="02-Jul-2013" Width="99" FontSize="16"/>
    <TextBlock x:Name="author15" Canvas.Left="64" TextWrapping="Wrap" Text="By-Gaurav Sharma" Canvas.Top="45" Width="173" FontSize="13.333"/>
</Canvas>

canvas on scroll viewer

修改
如果我使滚动查看器的高度变短,它会变得可滚动,但只能滚动到9和半画布。

1 个答案:

答案 0 :(得分:1)

继承你的问题。 StackPanel的高度为607,所以只需删除

<StackPanel x:Name="ContentPanel" Height="607" Width="456">

由于设备尺寸不同,设置宽度不是很好,尝试使用具有灵活布局的网格。对于你的例子是这样的。注意VerticalAlignment和Horizo​​ntalAlignments在绘制布局时非常有用。

<ScrollViewer Grid.Row="1">           
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="65" />
                    <RowDefinition Height="65" />
                </Grid.RowDefinitions>
                <Grid x:Name="panel1">
                    <TextBlock x:Name="sub1" TextWrapping="Wrap" Text="My Heading 001" Foreground="White" FontSize="21.333"/>
                    <TextBlock x:Name="author1" TextWrapping="Wrap" Text="By-Gaurav Sharma" FontSize="13.333"
                               VerticalAlignment="Bottom" Margin="50,0,0,0"/>
                    <TextBlock x:Name="date1" HorizontalAlignment="Right" TextWrapping="Wrap" Text="02-Jul-2013"  FontSize="16"/>
                </Grid>
                <Grid x:Name="panel2" Grid.Row="1">
                    <TextBlock x:Name="sub2" TextWrapping="Wrap" Text="My Heading 002" Foreground="White" FontSize="21.333"/>
                    <TextBlock x:Name="author2"  TextWrapping="Wrap" Text="By-Gaurav Sharma" FontSize="13.333"
                               VerticalAlignment="Bottom" Margin="50,0,0,0"/>
                    <TextBlock x:Name="date2" HorizontalAlignment="Right" TextWrapping="Wrap" Text="02-Jul-2013"  FontSize="16"/>
                </Grid>
            </Grid>             
    </ScrollViewer> ... ...

希望有所帮助