如何将滑块放在videobrush的顶部

时间:2012-07-30 22:23:07

标签: c# windows-phone-7 xaml

我正在尝试创建一个滑块控件,它将确定我的MainPage中视频滚动的scaletransform,并想知道是否有可能以某种方式将此滑块放在videobrush的顶部(我想要全屏) ?目前我正在使用网格进行布局,除了屏幕底部的两个按钮之外,videobrush占据了整个屏幕,但是我想使用画布并将此滑块放在一个可以解决当前问题的方式以及Windows Phone设备的未来屏幕尺寸。我不确定如何在不设置滑块的恒定尺寸的情况下完成此操作。例如,滑块可以在纵向模式下水平放置在屏幕底部附近,并且在左侧和右侧之间具有50像素空间。有人可以协助如何做到这一点吗?

修改

在videobrush上放置一个子元素可以工作,虽然我想放置多个滑块,这会产生错误。我还想在每个滑块的上方和下方添加信息,所以我选择了一个stackpanel来执行此操作(但是只允许一个stackpanel作为子元素?)。

<Border x:Name="videoRectangle" Grid.Row="0" Grid.ColumnSpan="2" >
            <Border.Background>
                <VideoBrush  x:Name="viewfinderBrush">
                    <VideoBrush.RelativeTransform>
                        <CompositeTransform x:Name="viewfinderBrushTransform" CenterX=".5" CenterY=".5" Rotation="90" />
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Border.Background>

            <!--<StackPanel VerticalAlignment="Top">
                <TextBlock x:Name="resolutionValueTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=resolutionSlider}"/>
                <Slider x:Name="resolutionSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
                <TextBlock x:Name="resolutionTextBlock" HorizontalAlignment="Center" Text="resolution"/>
            </StackPanel>-->

            <StackPanel VerticalAlignment="Bottom">
                <TextBlock x:Name="zoomNumberTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=zoomSlider}"/>
                <Slider x:Name="zoomSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
                <TextBlock x:Name="zoomTextBlock" HorizontalAlignment="Center" Text="zoom"/>
            </StackPanel>

</Border>

如果可能的话,我希望两个堆叠面板都可用,但如果没有,我想我只能使用底部面板。

1 个答案:

答案 0 :(得分:1)

留在网格中:

<Grid>
    <Rectangle>
        <Rectangle.Fill>
            <VideoBrush ... />
        </Rectangle.Fill>
    </Rectangle>
    <Slider HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom"
            Margin="50,5,50,5"/>
</Grid>