siverlight+wcf网络分房间斗地主1摆牌实现

先上一个简单的效果图



/article/2159374.html二

/article/2159375.html
三

一：建立一个siverlight页面 添加张背景图片

<Grid x:Name="LayoutRoot">

<Grid.Background> <!--添加背景图片-->

<ImageBrush ImageSource="Image\game-ddz_bg.png" Stretch="Fill"></ImageBrush>

</Grid.Background>

</Grid>

二：摆牌

其实很简单就是用几个StackPanel ，放上Image标签,由于牌之间有折叠效果，所以用Margin设置一下就行了

<UserControl x:Class="Poker_DZZ.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"
    mc:Ignorable="d"
    d:DesignHeight="760" d:DesignWidth="1100">

    <Grid x:Name="LayoutRoot" Width="1100" Height="760">
        
        <!--背景图片-->
        <Grid.Background>
            <ImageBrush  ImageSource="Image/game-ddz_bg.png" Stretch="Fill"></ImageBrush>
        </Grid.Background>

        <!--存放地主-->
        <StackPanel Name="top" VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Horizontal" Margin="0,50,0,0">
            <Image Source="Image/faceDown.png" Width="34" Height="78" Margin="0,0,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="34" Height="78" Margin="0,0,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="34" Height="78" Margin="0,0,0,0"></Image>
        </StackPanel>
        
        
        <!--左边对手-->
        <StackPanel Name="leftcompetitor" VerticalAlignment="Top" HorizontalAlignment="Left" Orientation="Vertical" Margin="90,150,0,0">
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,0,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
        </StackPanel>

        <!--右边对手-->
        <StackPanel Name="rightcompitor" VerticalAlignment="Top" HorizontalAlignment="Right" Orientation="Vertical" Margin="0,150,90,0">
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,0,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
            <Image Source="Image/faceDown.png" Width="74" Height="98" Margin="0,-80,0,0"></Image>
        </StackPanel>

        
        <!--自己-->
        <StackPanel  VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Vertical" Margin="0,0,50,50" Height="150">

            <StackPanel Name="mybuttonsp" Height="30" VerticalAlignment="Bottom" Orientation="Horizontal" HorizontalAlignment="Center">
                <Button  Style="{StaticResource RoundButton}" Content="1分"/>
                <Button  Style="{StaticResource RoundButton}" Margin="10,0,0,0" Content="2分"/>
                <Button  Style="{StaticResource RoundButton}" Margin="10,0,0,0" Content="3分"/>
                <Button  Style="{StaticResource RoundButton}" Margin="10,0,0,0" Content="不 叫"/>
            </StackPanel>
            <StackPanel Name="mypoker" VerticalAlignment="Bottom" HorizontalAlignment="Center" Orientation="Horizontal" Margin="0,22,0,0" Height="98">
                <Image Source="Image\dawang.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\xiaowang.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\fang_2.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\mei_2.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hei_2.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hong_2.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\fang_1.png" Width="74" Height="98" Margin="0,-0,-50,0"></Image>
                <Image Source="Image\mei_1.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hei_1.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hong_1.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\fang_3.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\mei_3.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hei_3.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
                <Image Source="Image\hong_3.png" Width="74" Height="98" Margin="0,0,-50,0"></Image>
            </StackPanel>
        </StackPanel>
        
    </Grid>
</UserControl>

三：准备出牌的效果

其实也是设置一下Image的Margin就能显示这种效果了

<Image Source="Image\hong_1.png" Width="95" Height="129" Margin="0,-60,-69,0"></Image>

- .-图片的url设置成"\"斜杠居然运行时显示不出来改成/就好了 Source="Image/hong_1.png"

当然这是简单的直接摆牌，后边需要用一个54的数字来分别对应这些牌，后台产出混乱的54位数组，在分成三份传给前台找到对应的url摆出相应的牌