Xaml,以编程方式在堆栈面板中添加按钮

时间:2012-10-24 07:46:49

标签: windows xaml

对于我的windows8App,我需要一个带有播放按钮的图像。 我创建了一个网格,网格包含一个stackplan。我想以编程方式将图像和按钮放在图像上。但是当我运行应用程序时,我看到按钮位于图像后面。 我的问题第一个问题是,如果将按钮放在图像上是一种好方法吗? 如果是,那么我的代码有什么问题?

<Border x:Name="videoPlayerBr" BorderBrush="#FFDED5D5"   HorizontalAlignment="Center" Width="400" Height="300" VerticalAlignment="Top"  Grid.Row="0">
 <StackPanel Name="videoPlayerSP">
 </StackPanel>
 </Border>

这是背后的代码:

        var proVideoImg = new Image();
        proVideoImg.Source = new BitmapImage(new Uri("ms-appx:///Assets/image.png", UriKind.Absolute));
        proVideoImg.Stretch = Stretch.UniformToFill;
        videoPlayerSP.Children.Add(proVideoImg);

        var playBtn = new Button();
        playBtn.Margin = new Thickness(136, 121, 0, 133);
        ImageBrush brush1 = new ImageBrush();
        brush1.ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/playbutton.png"));
        playBtn.Background = brush1;        
        playBtn.Click += new RoutedEventHandler(PlayVideo_Button_Click);
        videoPlayerSP.Children.Add(playBtn);

感谢。

2 个答案:

答案 0 :(得分:0)

尝试将图像和按钮控件放在Canvas或嵌套网格中。

答案 1 :(得分:0)

我刚刚推出了一个解决方案。干得好。我希望你能轻松地将它转换成C#吗?

      <Button Height="29" Width="82" Click="Button_Click">
        <Button.Content>
            <Grid>
                <Image Source="Icons/add_action.png" Stretch="Fill" Opacity=".2"/>
                    <Path Data="M13,9.8933333 L13,21.561587 23.2164,16.328076 z" Fill="#FFBED460" HorizontalAlignment="Center" Stretch="Fill" Width="11.212" RenderTransformOrigin="0.357,0.5" VerticalAlignment="Center" Height="15">
                        <Path.Stroke>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="#FF9B6262" Offset="1"/>
                            </LinearGradientBrush>
                        </Path.Stroke>
                    </Path>
                </Grid>             
            </Button.Content>                   
        </Button>