微信公众号：dotnet9，网站：dotnet9，问题或建议：，
如果对您有所帮助：。

c# wpf从riot api获取数据(riot代表作品《英雄联盟》)

阅读导航

1. 本文背景
2. 代码实现
3. 本文参考

1. 本文背景

riot(拳头)是一家美国网游开发商，成立于2006年，代表作品《英雄联盟》。

本文重点要讲解两个知识点：

1. c# 使用 httpclient 访问 riot 提供的 api 接口，获取召唤者概况信息；
2. c# wpf界面展示召唤者信息搜索、概况信息两个界面。

2. 代码实现

站长使用 .net core 3.1 创建名为 “lolgoal” 的wpf解决方案，并添加3个nuget包，配置如下：

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="materialdesigncolors" version="1.1.1" targetframework="net45" />
  <package id="materialdesignthemes" version="2.5.0.1205" targetframework="net45" />
  <package id="newtonsoft.json" version="12.0.1" targetframework="net45" />
</packages>

界面使用的md控件，本站曾有介绍： 。

本文只简单说明部分代码，整体解决方案目录结构如下，源码文末会给出：

2.1 引入md控件样式

文件【app.xaml】

<application x:class="lolgoal.app"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             startupuri="view/mainwindow.xaml">
    <application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.light.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/primary/materialdesigncolor.purple.xaml" />
                <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/accent/materialdesigncolor.blue.xaml" />
            </resourcedictionary.mergeddictionaries>
        </resourcedictionary>
    </application.resources>
</application>

2.2 召唤者概况搜索界面

文件【mainwindow.xaml】代码，界面布局简单，给人的感觉整体简洁大方：

<window x:class="lolgoal.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:ignorable="d" height="600" width="400" windowstartuplocation="centerscreen" 
        mouseleftbuttondown="window_mouseleftbuttondown"
        resizemode="noresize" windowstyle="none" background="#ff410a66">
    <grid>
        <stackpanel margin="50">
            <image source="/assets/logo2.png" width="96" height="96"/>
            <border background="white" margin="10 20" cornerradius="5">
                <stackpanel margin="25">
                    <combobox margin="15" style="{staticresource materialdesignfloatinghintcombobox}" materialdesign:hintassist.hint="地区" text="{binding region}">
                        <comboboxitem content="ru"/>
                        <comboboxitem content="kr"/>
                        <comboboxitem content="br1"/>
                        <comboboxitem content="oc1"/>
                        <comboboxitem content="jp1"/>
                        <comboboxitem content="na1"/>
                        <comboboxitem content="eun1"/>
                        <comboboxitem content="euw1"/>
                        <comboboxitem content="tr1"/>
                        <comboboxitem content="la1"/>
                        <comboboxitem content="la2"/>
                    </combobox>
                    <textbox text="{binding summonername}" margin="15" style="{staticresource materialdesignfloatinghinttextbox}" materialdesign:hintassist.hint="召唤者"/>
                    <stackpanel orientation="horizontal" horizontalalignment="center">
                        <button margin="15 50" content="取消"/>
                        <button x:name="buttonsignup" margin="15 50" content="搜索" click="buttonsignup_click"/>
                    </stackpanel>
                </stackpanel>
            </border>
        </stackpanel>
    </grid>
</window>

召唤者概况搜索界面

2.3 召唤者概况信息展示界面

文件【windowprofile.xaml】，布局代码也不多，清爽：

<window x:class="lolgoal.view.windowprofile"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialdesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:ignorable="d" height="600" width="400" 
        windowstartuplocation="centerscreen" resizemode="noresize" 
        windowstyle="none" background="#ff410a66">
    <grid>
        <border background="white" margin="20 100 20 20" cornerradius="15">
            <stackpanel verticalalignment="top" horizontalalignment="stretch">
                <border width="100" height="100" margin="20 20 0 10" borderbrush="gray" horizontalalignment="left" borderthickness="1" cornerradius="15">
                    <border.background>
                        <imagebrush imagesource="{binding path=icon}"/>
                    </border.background>
                </border>
                <textblock margin="20 15" fontsize="30" text="{binding path=summonername}" foreground="darkgray"/>
                <stackpanel orientation="horizontal" margin="20 0">
                    <stackpanel margin="5">
                        <textblock text="胜" fontsize="15" fontweight="bold" foreground="green"/>
                        <textblock text="{binding path=wins}" fontsize="18" foreground="gray" horizontalalignment="center"/>
                    </stackpanel>
                    <stackpanel margin="5">
                        <textblock text="输" fontsize="15" fontweight="bold" foreground="darkred"/>
                        <textblock text="{binding path=losses}" fontsize="18" foreground="gray" horizontalalignment="center"/>
                    </stackpanel>
                </stackpanel>
                <stackpanel margin="30 20">
                    <textblock text="水平" fontsize="15" foreground="lightgray"/>
                    <textblock text="{binding path=level}" horizontalalignment="center" fontsize="80" foreground="gray"/>
                </stackpanel>
                <grid margin="20 10">
                    <button x:name="buttonsearch" horizontalalignment="left" style="{staticresource materialdesignflatbutton}" width="100" click="buttonsearch_click">
                        <materialdesign:packicon kind="search" width="24" height="24"/>
                    </button>
                    <button horizontalalignment="right" width="100" content="登录"/>
                </grid>
            </stackpanel>
        </border>
        <stackpanel horizontalalignment="right" margin="30 10">
            <image source="{binding path=emblem}" width="200" height="200">
                <image.effect>
                    <dropshadoweffect blurradius="40" shadowdepth="1"/>
                </image.effect>
            </image>
            <stackpanel orientation="horizontal" horizontalalignment="center" margin="5">
                <textblock fontsize="18" foreground="gray" text="{binding path=tier}" margin="5" verticalalignment="center"/>
                <textblock fontsize="20" foreground="gray" text="{binding path=rank}" margin="5"/>
            </stackpanel>
        </stackpanel>
    </grid>
</window>

概况信息展示界面

2.4 简单的api接口调用封装

直接上代码看，key.txt是存储的riot开发者key：

using system;
using system.collections.generic;
using system.io;
using system.linq;
using system.net.http;
using system.text;
using system.threading.tasks;

namespace lolgoal.api
{
    public class api
    {
        private string key { get; set; }
        private string region { get; set; }

        public api(string region)
        {
            region = region;
            key = getkey("api/key.txt");
        }

        protected httpresponsemessage get(string url)
        {
            using (httpclient client = new httpclient())
            {
                var result = client.getasync(url);
                result.wait();

                return result.result;
            }
        }

        protected string geturi(string path)
        {
            return "https://" + region + ".api.riotgames.com/lol/" + path + "?api_key=" + key;
        }

        public string getkey(string path)
        {
            streamreader sr = new streamreader(path);
            return sr.readtoend();
        }
    }
}

2.5 其他代码

查看源码：get_profile_data

2.6 以下是站长方便演示、截图，修改的部分文件

可参考源码对比：

文件【api/league_v4.cs】

using lolgoal.model;
using system;
using system.collections.generic;

namespace lolgoal.api
{
    public class league_v4 : api
    {
        public league_v4(string region) : base(region)
        {
        }

        public list<positiondto> getpositions(string summonerid)
        {
            //1、这是正常的api访问
            //string path = "league/v4/positions/by-summoner/" + summonerid;

            //var response = get(geturi(path));
            //string content = response.content.readasstringasync().result;

            //if (response.statuscode == system.net.httpstatuscode.ok)
            //{
            //    return jsonconvert.deserializeobject<list<positiondto>>(content);
            //}
            //else
            //{
            //    return null;
            //}

            //2、这是模拟数据，正常访问lol服务器，需要注册key
            string[] tiers = { "bronze", "challenger", "diamond", "gold", "grandmaster", "iron", "master", "platinum", "silver" };
            var rd = new random(datetime.now.millisecond);
            var lst = new list<positiondto>();
            for (int i = 0; i < rd.next(5, 20); i++)
            {
                lst.add(new positiondto
                {
                    tier = tiers[rd.next(0, tiers.length)],
                    rank = "iv",
                    wins = rd.next(2, 100),
                    losses = rd.next(2, 100),
                    queuetype = "ranked_solo_5x5"
                });
            }
            return lst;
        }
    }
}

文件【api/summoner_v4.cs】

using lolgoal.model;
using system;

namespace lolgoal.api
{
    public class summoner_v4 : api
    {
        public summoner_v4(string region) : base(region)
        {
        }

        public summonerdto getsummonerbyname(string summonername)
        {
            //1、这是正常的api访问
            //string path = "summoner/v4/summoners/by-name/" + summonername;

            //var response = get(geturi(path));
            //string content = response.content.readasstringasync().result;

            //if(response.statuscode == system.net.httpstatuscode.ok)
            //{
            //    return jsonconvert.deserializeobject<summonerdto>(content);
            //}
            //else
            //{
            //    return null;
            //}

            //2、这是模拟数据，正常访问lol服务器，需要注册key
            return new summonerdto
            {
                profileiconid = datetime.now.second,
                name = summonername,
                summonerlevel = new random(datetime.now.millisecond).next(50, 200),
                id = datetime.now.second.tostring()
            };
        }
    }
}

3.参考

1. 视频一：c# wpf design ui - #1 - login，配套源码：lolgoal。
2. 视频二：c# wpf design ui - #2 (1/2) - rest api access，配套源码：get_summoner_data。
3. 视频三：c# wpf design ui - #2 (2/2) - rest api access，配套源码：get_summoner_data。
4. 视频四：c# wpf design ui - #3 - profile，配套源码：summoner_profile。
5. 视频五：c# wpf design ui - #4 (1/2) - get data from riot api，配套源码：get_profile_data。
6. 视频六：c# wpf design ui - #4 (2/2)- get data from riot api，配套源码：get_profile_data。

最终源码：本文代码几乎和源码一致（第五和第六个视频配套github源码 【get_profile_data】），站长未注册riot开发者key，所以代码中采用模拟返回数据的方式，只展示了界面效果，并将部分英文改为中文，便于向大家展示此工程。

点击下载源码：get_profile_data

除非注明，文章均由 dotnet9 整理发布，欢迎转载。

转载请注明本文地址：

欢迎扫描下方二维码关注 dotnet9 的微信公众号，本站会及时推送最新技术文章