[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"page-\u002Fcsharp\u002Favalonia\u002Favalonia的跨平台属性":3},{"id":4,"title":5,"body":6,"description":12,"extension":287,"meta":288,"navigation":289,"path":290,"seo":291,"stem":292,"__hash__":293},"content\u002Fcsharp\u002FAvalonia\u002Favalonia的跨平台属性.md","Avalonia的跨平台属性",{"type":7,"value":8,"toc":284},"minimark",[9,13,35,39,49,52,58,70,79,86,101,274,277,280],[10,11,12],"p",{},"Avalonia现在不只是支持linux平台，还支持Android平台开发，对于次，avalonia提供了两种标记扩展来实现区分平台的操作。",[14,15,16,27],"ol",{},[17,18,19,26],"li",{},[20,21,22],"strong",{},[23,24,25],"code",{},"OnFormFactor"," - 根据设备类型(Desktop\u002FMobile\u002FTV)提供不同的值",[17,28,29,34],{},[20,30,31],{},[23,32,33],{},"OnPlatform"," - 根据操作系统平台(Windows\u002FmacOS\u002FLinux\u002FiOS\u002FAndroid\u002FBrowser)提供不同的值",[36,37,38],"h3",{"id":38},"实际使用示例",[40,41,46],"pre",{"className":42,"code":44,"language":45},[43],"language-text","\u003CDockPanel>  \n    \u003C!-- Tabs 导航栏,PC 在左边,移动在底部 -->  \n    \u003CTabControl DockPanel.Dock=\"{OnFormFactor Desktop=Left, Mobile=Bottom}\">  \n        \u003CTabItem Header=\"首页\" \u002F>  \n        \u003CTabItem Header=\"设置\" \u002F>  \n    \u003C\u002FTabControl>  \n      \n    \u003C!-- 主内容区域 -->  \n    \u003CContentControl \u002F>  \n\u003C\u002FDockPanel>\n","text",[23,47,44],{"__ignoreMap":48},"",[10,50,51],{},"同理，如果还想要设置横向或者竖向，也可以这样干：",[40,53,56],{"className":54,"code":55,"language":45},[43],"\n\u003CTabControl TabStripPlacement=\"{OnFormFactor Desktop=Left, Mobile=Top}\"    DockPanel.Dock=\"{OnFormFactor Desktop=Left, Mobile=Bottom}\">\n            \u003CTabItem Header=\"首页\">\u003C\u002FTabItem>\n            \u003CTabItem Header=\"我的\">\u003C\u002FTabItem>\n\u003C\u002FTabControl>\n\n",[23,57,55],{"__ignoreMap":48},[10,59,60,66,67,69],{},[20,61,62,63,65],{},"几乎所有的属性都可以使用 ",[23,64,25],{}," 来控制","。",[23,68,25],{}," 是一个通用的标记扩展,可以为任何属性类型提供基于设备类型的不同值。",[10,71,72,74,75,78],{},[23,73,25],{}," 在 XAML 编译时被处理,通过 ",[23,76,77],{},"AvaloniaXamlIlOptionMarkupExtensionTransformer"," 转换器: AvaloniaXamlIlOptionMarkupExtensionTransformer.cs:15-24",[10,80,81,82,85],{},"编译器会检查 ",[23,83,84],{},"ShouldProvideOption"," 方法来决定使用哪个平台的值,这个过程在编译时完成,因此运行时性能没有额外开销。",[10,87,88,89,92,93,96,97,100],{},"我们顺便也把tabs订阅点击事件来得到tabs变化进而进行导航跳转的逻辑，",[23,90,91],{},"TabControl"," 继承自 ",[23,94,95],{},"SelectingItemsControl",",提供了 ",[23,98,99],{},"SelectionChanged"," 事件:",[40,102,106],{"className":103,"code":104,"language":105,"meta":48,"style":48},"language-cs shiki shiki-themes github-light github-dark","private void TabControl_SelectionChanged(object? sender, SelectionChangedEventArgs e)  \n{  \n    if (sender is TabControl tabControl)  \n    {  \n        \u002F\u002F 获取选中的 TabItem  \n        if (tabControl.SelectedItem is TabItem selectedTab)  \n        {  \n            var header = selectedTab.Header;  \n            Console.WriteLine($\"Selected tab header: {header}\");  \n              \n            \u002F\u002F 根据 header 进行导航  \n            NavigateBasedOnHeader(header);  \n        }  \n    }  \n}  \n  \nprivate void NavigateBasedOnHeader(object? header)  \n{  \n    switch (header?.ToString())  \n    {  \n        case \"首页\":  \n            \u002F\u002F 导航到首页  \n            break;  \n        case \"设置\":  \n            \u002F\u002F 导航到设置页  \n            break;  \n    }  \n}\n","cs",[23,107,108,116,122,128,134,140,146,152,158,164,170,176,182,188,194,200,206,212,217,223,228,234,240,246,252,258,263,268],{"__ignoreMap":48},[109,110,113],"span",{"class":111,"line":112},"line",1,[109,114,115],{},"private void TabControl_SelectionChanged(object? sender, SelectionChangedEventArgs e)  \n",[109,117,119],{"class":111,"line":118},2,[109,120,121],{},"{  \n",[109,123,125],{"class":111,"line":124},3,[109,126,127],{},"    if (sender is TabControl tabControl)  \n",[109,129,131],{"class":111,"line":130},4,[109,132,133],{},"    {  \n",[109,135,137],{"class":111,"line":136},5,[109,138,139],{},"        \u002F\u002F 获取选中的 TabItem  \n",[109,141,143],{"class":111,"line":142},6,[109,144,145],{},"        if (tabControl.SelectedItem is TabItem selectedTab)  \n",[109,147,149],{"class":111,"line":148},7,[109,150,151],{},"        {  \n",[109,153,155],{"class":111,"line":154},8,[109,156,157],{},"            var header = selectedTab.Header;  \n",[109,159,161],{"class":111,"line":160},9,[109,162,163],{},"            Console.WriteLine($\"Selected tab header: {header}\");  \n",[109,165,167],{"class":111,"line":166},10,[109,168,169],{},"              \n",[109,171,173],{"class":111,"line":172},11,[109,174,175],{},"            \u002F\u002F 根据 header 进行导航  \n",[109,177,179],{"class":111,"line":178},12,[109,180,181],{},"            NavigateBasedOnHeader(header);  \n",[109,183,185],{"class":111,"line":184},13,[109,186,187],{},"        }  \n",[109,189,191],{"class":111,"line":190},14,[109,192,193],{},"    }  \n",[109,195,197],{"class":111,"line":196},15,[109,198,199],{},"}  \n",[109,201,203],{"class":111,"line":202},16,[109,204,205],{},"  \n",[109,207,209],{"class":111,"line":208},17,[109,210,211],{},"private void NavigateBasedOnHeader(object? header)  \n",[109,213,215],{"class":111,"line":214},18,[109,216,121],{},[109,218,220],{"class":111,"line":219},19,[109,221,222],{},"    switch (header?.ToString())  \n",[109,224,226],{"class":111,"line":225},20,[109,227,133],{},[109,229,231],{"class":111,"line":230},21,[109,232,233],{},"        case \"首页\":  \n",[109,235,237],{"class":111,"line":236},22,[109,238,239],{},"            \u002F\u002F 导航到首页  \n",[109,241,243],{"class":111,"line":242},23,[109,244,245],{},"            break;  \n",[109,247,249],{"class":111,"line":248},24,[109,250,251],{},"        case \"设置\":  \n",[109,253,255],{"class":111,"line":254},25,[109,256,257],{},"            \u002F\u002F 导航到设置页  \n",[109,259,261],{"class":111,"line":260},26,[109,262,245],{},[109,264,266],{"class":111,"line":265},27,[109,267,193],{},[109,269,271],{"class":111,"line":270},28,[109,272,273],{},"}\n",[10,275,276],{},"这里的导航逻辑我们可以用一个Dictionary去获得对应的view实例，这样就能很方便地设置Content进行导航，当然，使用viewlocator也可以。如果要使用ViewLocator的话，就需要注意名称用法，因为默认的ViewLocator标准实现是通过名称替换的方式去创建实例的，\nvar name = data.GetType().FullName!.Replace(\"ViewModel\", \"View\");",[10,278,279],{},"只不过我们日常在使用的时候这里会通过DI容器去获得实例而不是直接创建。",[281,282,283],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":48,"searchDepth":118,"depth":118,"links":285},[286],{"id":38,"depth":124,"text":38},"md",{},true,"\u002Fcsharp\u002Favalonia\u002Favalonia的跨平台属性",{"description":12},"csharp\u002FAvalonia\u002Favalonia的跨平台属性","5fEA2gPIVcHCzc6yxhIneY60Nr_1idygVcokc-2GYb4",1791042464833]