首页 新闻 赞助 找找看

如图效果使用xaml如何实现?

0
悬赏园豆:30 [已解决问题] 解决于 2016-12-07 16:41

新手求如图所示xaml实现代码,万望高手指点

问题补充:

想要的结果是程序启动时数字背景像图片中的1,2号码一样灰色,当鼠标点击任意号码的时候变成3号码球一样红色并且可以同时选择多个号码球(即为灰色号码球添加鼠标单击事件程序使其号码球变成红底白字号码球),当鼠标再次点击时号码球恢复灰色,谢谢!!

梦天涯的主页 梦天涯 | 初学一级 | 园豆:103
提问于:2016-12-05 20:15
< >
分享
最佳答案
0

1.自定义UserControl

<UserControl x:Class="WpfApplication1.LotteryBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Label x:Name="lbl" Width="{Binding}" Height="{Binding}">
        <Label.Template>
            <ControlTemplate TargetType="Label">
                <Grid>
                    <Ellipse
                         StrokeThickness="2">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="{Binding Path=BackColor,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}"></SolidColorBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter Content="{Binding Path=Text,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Label.Template>
    </Label>
</UserControl>
View Code
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for LotteryBar.xaml
    /// </summary>
    public partial class LotteryBar : UserControl
    {
        public LotteryBar()
        {
            InitializeComponent();
        }



        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(LotteryBar), new PropertyMetadata(string.Empty));




        public Color BackColor
        {
            get { return (Color)GetValue(BackColorProperty); }
            set { SetValue(BackColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BackColorProperty =
            DependencyProperty.Register("BackColor", typeof(Color), typeof(LotteryBar), new PropertyMetadata(Colors.LightGray));




        public Color ForeColor
        {
            get { return (Color)GetValue(ForeColorProperty); }
            set { SetValue(ForeColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ForeColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ForeColorProperty =
            DependencyProperty.Register("ForeColor", typeof(Color), typeof(LotteryBar), new PropertyMetadata(Colors.Black,new PropertyChangedCallback(OnForeColorChangedCallback)));


        public static void OnForeColorChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if(e.OldValue != e.NewValue)
            {
                var uc = d as LotteryBar;
                uc.lbl.Foreground = new SolidColorBrush((Color)e.NewValue);
            }
        }
    }
}
View Code

2.使用UserControl

    <Grid Width="200" Height="100">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <local:LotteryBar Text="01" Width="30" Height="30"></local:LotteryBar>
        <local:LotteryBar Text="02" Width="30" Height="30" Grid.Column="1"></local:LotteryBar>
        <local:LotteryBar Text="03" Width="30" Height="30" Grid.Column="2" ForeColor="White" BackColor="Red"></local:LotteryBar>
        <local:LotteryBar Text="04" Width="30" Height="30" Grid.Column="3"></local:LotteryBar>
        <local:LotteryBar Text="05" Width="30" Height="30" Grid.Column="4"></local:LotteryBar>
        <local:LotteryBar Text="06" Width="30" Height="30" Grid.Column="5"></local:LotteryBar>
    </Grid>
View Code

 

收获园豆:25
jello chen | 大侠五级 |园豆:7306 | 2016-12-06 00:30

您好!非常感谢你的帮助,我现在想要的结果是程序启动时数字背景像图片中的1,2号码一样灰色,当鼠标点击任意号码的时候变成3号码球一样红色并且可以同时选择多个号码球,当再次点击时恢复到初始灰色状态,弄了好久没成功,求指教,感激不尽,谢谢!!

梦天涯 | 园豆:103 (初学一级) | 2016-12-06 20:54

@梦天涯: 嗯,稍微改下即可

1.自定义UserControl

<UserControl x:Class="WpfApplication1.LotteryBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Label x:Name="lbl" Width="{Binding}" Height="{Binding}" MouseDown="lbl_MouseDown">
        <Label.Template>
            <ControlTemplate TargetType="Label">
                <Grid>
                    <Ellipse
                         StrokeThickness="2">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="{Binding Path=BackColor,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}"></SolidColorBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter Content="{Binding Path=Text,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Label.Template>
    </Label>
</UserControl>
View Code
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for LotteryBar.xaml
    /// </summary>
    public partial class LotteryBar : UserControl
    {
        
        public LotteryBar()
        {
            InitializeComponent();
        }

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(LotteryBar), new PropertyMetadata(string.Empty));




        public Color BackColor
        {
            get { return (Color)GetValue(BackColorProperty); }
            set { SetValue(BackColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BackColorProperty =
            DependencyProperty.Register("BackColor", typeof(Color), typeof(LotteryBar), new PropertyMetadata(Colors.LightGray));


        public Color ForeColor
        {
            get { return (Color)GetValue(ForeColorProperty); }
            set { SetValue(ForeColorProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ForeColor.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ForeColorProperty =
            DependencyProperty.Register("ForeColor", typeof(Color), typeof(LotteryBar), new PropertyMetadata(Colors.Black,new PropertyChangedCallback(OnForeColorChangedCallback)));


        public static void OnForeColorChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if(e.OldValue != e.NewValue)
            {
                var uc = d as LotteryBar;
                uc.lbl.Foreground = new SolidColorBrush((Color)e.NewValue);
            }
        }



        public bool Highlight
        {
            get { return (bool)GetValue(IsHighlightProperty); }
            set { SetValue(IsHighlightProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IsHighlight.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsHighlightProperty =
            DependencyProperty.Register("IsHighlight", typeof(bool), typeof(LotteryBar), new PropertyMetadata(false,new PropertyChangedCallback(OnHighlightChangedCallback)));

        public static void OnHighlightChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.OldValue != e.NewValue)
            {
                var uc = d as LotteryBar;
                var _highlight = (bool)e.NewValue;
                if (!_highlight)
                {
                    uc.BackColor = Colors.LightGray;
                    uc.ForeColor = Colors.Black;
                }
                else
                {
                    uc.BackColor = Colors.Red;
                    uc.ForeColor = Colors.White;
                }
            }
        }

        private void lbl_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            if(e.ChangedButton == System.Windows.Input.MouseButton.Left)
            {
                Highlight = !Highlight;
            }
        }
    }
}
View Code

2.使用UserControl

<Grid Width="200" Height="100">
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <local:LotteryBar Text="01" Width="30" Height="30"></local:LotteryBar>
        <local:LotteryBar Text="02" Width="30" Height="30" Grid.Column="1"></local:LotteryBar>
        <local:LotteryBar Text="03" Width="30" Height="30" Grid.Column="2" Highlight="True"></local:LotteryBar>
        <local:LotteryBar Text="04" Width="30" Height="30" Grid.Column="3"></local:LotteryBar>
        <local:LotteryBar Text="05" Width="30" Height="30" Grid.Column="4"></local:LotteryBar>
        <local:LotteryBar Text="06" Width="30" Height="30" Grid.Column="5"></local:LotteryBar>
    </Grid>
View Code
jello chen | 园豆:7306 (大侠五级) | 2016-12-06 23:03

@梦天涯: 

<Label x:Name="lbl" Width="{Binding}" Height="{Binding}">
        <Label.Template>
            <ControlTemplate TargetType="Label">
                <Grid>
                    <Ellipse
                         StrokeThickness="2">
                        <Ellipse.Fill>
                            <SolidColorBrush Color="{Binding Path=BackColor,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}"></SolidColorBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <ContentPresenter Content="{Binding Path=Text,Mode=TwoWay,RelativeSource={RelativeSource AncestorType=UserControl}}" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Label.Template>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseUp">
                <i:InvokeCommandAction Command="{Binding OnIconButtonClicked}" CommandParameter="{Binding}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Label>

label这么些   引用

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
龙葛格 | 园豆:782 (小虾三级) | 2016-12-06 23:28
其他回答(2)
0

新手的话,放一堆图片就行了。说多了反而麻烦。

爱编程的大叔 | 园豆:30839 (高人七级) | 2016-12-05 22:11
0

@jello chen提供的代码应该可以完美符合你的需求

收获园豆:5
龙葛格 | 园豆:782 (小虾三级) | 2016-12-06 17:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册