当前位置:网站首页 / WPF / 正文

Ay写给2022的纯xaml [wpf4net5] - Caliburn Micro-绑定[2/16]

时间:2021年09月16日 | 作者 : aaronyang | 分类 : WPF | 浏览: 128次 | 评论 0

相关文章

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro[1/16],MyGet-WPF-aaronyang技术分享 (ayjs.net) Download

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro-绑定[2/16]-WPF-aaronyang技术分享 (ayjs.net) Download

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro-调用vm的方法[3/16]-WPF-aaronyang技术分享 (ayjs.net)  Download

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro-Coroutine协程[4/16]-WPF-aaronyang技术分享 (ayjs.net) Download

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro-Execute 异步里面更新界面UI[5/16]-WPF-aaronyang技术分享 (ayjs.net) 第5天CM.zip

Ay写给2022的纯xaml [wpf4net5] - Caliburn-Micro-EventAggregation[6/16]-WPF-aaronyang技术分享 (ayjs.net) 第6天CM.zip

Ay写给2022的纯xaml [wpf4net5] - Caliburn Micro-Conductor[7/16]-WPF-aaronyang技术分享 (ayjs.net) 第7天CM.zip

Ay写给2022的纯xaml [wpf4net5] - Caliburn Micro-Bubbling[8/16]-WPF-aaronyang技术分享 (ayjs.net)  第8天CM.zip



修改BindingsView

<Page x:Class="cm1.Views.BindingsView"
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="BindingsView">

    <Grid>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <ListBox x:Name="Activities">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>

            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,12">
                <TextBlock Text="Selected:"  Margin="0,0,6,0"/>
                <TextBlock x:Name="SelectedActivity_Title"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>


在ViewModels和Views 都新建 Activity文件夹,以后默认都同步新建文件夹,这也是CM命名规则,只认namespace,这也是为了防止出错。


ListBox使用Activities名称,所以后台有个Activities的集合,集合的Item只能是一个类型,所以我们放父类,拓展两个子类类型

using System;

namespace cm1.ViewModels.Activity
{
    public abstract class ActivityBaseViewModel
    {
        public abstract string Title { get; }
    }
    public class MessageActivityViewModel : ActivityBaseViewModel
    {
        public MessageActivityViewModel(string message)
        {
            Message = message;
        }

        public override string Title => "Message";
        public string Message { get; }
    }

    public class PhotoActivityViewModel : ActivityBaseViewModel
    {
        public PhotoActivityViewModel(string caption)
        {
            Caption = caption;
        }

        public override string Title => "Photo";
        public string Caption { get; }
    }
}

   对应的

MessageActivityView.xaml

<UserControl x:Class="cm1.Views.Activity.MessageActivityView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Ellipse Grid.Column="0" Width="48" Height="48" Fill="Green" Margin="0,0,12,0" VerticalAlignment="Top" />

        <StackPanel Grid.Column="1">
            <TextBlock x:Name="Title" FontSize="16" FontWeight="SemiBold" />
            <TextBlock x:Name="Message"/>
        </StackPanel>

    </Grid>
</UserControl>

PhotoActivityView.xaml

<UserControl x:Class="cm1.Views.Activity.PhotoActivityView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style x:Key="PhotoRectStyle" TargetType="Rectangle">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Margin" Value="0,0,20,0"/>
            <Setter Property="Fill" Value="Green"/>
        </Style>
    </UserControl.Resources>

    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Rectangle Style="{StaticResource PhotoRectStyle}" />
            <Rectangle Style="{StaticResource PhotoRectStyle}" />
            <Rectangle Style="{StaticResource PhotoRectStyle}" />
        </StackPanel>

        <TextBlock x:Name="Caption"/>

    </StackPanel>
</UserControl>

运行后,item会根据vm自动匹配对应的v,然后显示

image.png

修改

image.png

运行后是没效果的

现在修改 对应的VM

using System;

namespace cm1.ViewModels.Activity
{
    public abstract class ActivityBaseViewModel
    {
        public abstract string Title { get; }
        public abstract string Caption { get; }
    }
    public class MessageActivityViewModel : ActivityBaseViewModel
    {
        public MessageActivityViewModel(string message)
        {
            Message = message;
        }

        public override string Title => "Message"; 
        public override string Caption { get; }
        public  string Message { get; }
    }

    public class PhotoActivityViewModel : ActivityBaseViewModel
    {
        public PhotoActivityViewModel(string caption)
        {
            Caption = caption;
        }

        public override string Title => "Photo";
        public override string Caption { get; }
    }
}

image.png

现在可以显示了

在CM的约定中,使用 x:Name 和 下划线  来读取 一个对象的属性,只会读取当前类型的属性,不会自动根据子类型读取 属性的值


接下来,修改MessageActivityView.xaml

image.png

Message不使用CM的约定,运行后,效果和x:Name一样的

在CM的约定中,列表控件,可以从外往内 兼容约定,不可以从 内部有约定,而外部没按照约定



先复制粘贴 CM这种写法的文件,后面要修改


我是推荐这种,但你也可以考虑直接写在BindingsView里面


移除MessageActivityView.xaml和PhotoActivityView.xaml

修改BindingsView.xaml如下,我们把绿色换成粉色

<Page x:Class="cm1.Views.BindingsView"
      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:vm="clr-namespace:cm1.ViewModels.Activity" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="BindingsView">

    <Grid>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <ListBox ItemsSource="{Binding Activities}">
                <ListBox.Resources>
                    <Style x:Key="PhotoRectStyle" TargetType="Rectangle">
                        <Setter Property="Width" Value="100"/>
                        <Setter Property="Height" Value="60"/>
                        <Setter Property="Margin" Value="0,0,20,0"/>
                        <Setter Property="Fill" Value="Pink"/>
                    </Style>
                    <DataTemplate DataType="{x:Type vm:MessageActivityViewModel}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Ellipse Grid.Column="0" Width="48" Height="48" Fill="Pink" Margin="0,0,12,0" VerticalAlignment="Top" />

                            <StackPanel Grid.Column="1">
                                <TextBlock x:Name="Title" FontSize="16" FontWeight="SemiBold" />
                                <TextBlock x:Name="Message"/>
                            </StackPanel>

                        </Grid>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type vm:PhotoActivityViewModel}">

                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                            </StackPanel>

                            <TextBlock x:Name="Caption"/>

                        </StackPanel>
                    </DataTemplate>
                </ListBox.Resources>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>

            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,12">
                <TextBlock Text="Selected:"  Margin="0,0,6,0"/>
                <TextBlock x:Name="SelectedActivity_Title"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

注意listbox,如果listbox直接使用x:Name方式,运行时候,会根据vm找v,你把数据模板写在这没用,如果你 使用ItemsSource指定,就可以想要的传统的写法的效果了

image.png

但是发现,模板里面的textblock不出来,因为你也不能使用CM的约定了,修改如下

     <ListBox ItemsSource="{Binding Activities}">
                <ListBox.Resources>
                    <Style x:Key="PhotoRectStyle" TargetType="Rectangle">
                        <Setter Property="Width" Value="100"/>
                        <Setter Property="Height" Value="60"/>
                        <Setter Property="Margin" Value="0,0,20,0"/>
                        <Setter Property="Fill" Value="Pink"/>
                    </Style>
                    <DataTemplate DataType="{x:Type vm:MessageActivityViewModel}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Ellipse Grid.Column="0" Width="48" Height="48" Fill="Pink" Margin="0,0,12,0" VerticalAlignment="Top" />

                            <StackPanel Grid.Column="1">
                                <TextBlock Text="{Binding Title}" FontSize="16" FontWeight="SemiBold" />
                                <TextBlock Text="{Binding Message}"/>
                            </StackPanel>

                        </Grid>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type vm:PhotoActivityViewModel}">

                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                            </StackPanel>

                            <TextBlock Text="{Binding Caption}"/>

                        </StackPanel>
                    </DataTemplate>
                </ListBox.Resources>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>

image.png

又会发现,下方的Selected选中没效果了

<Page x:Class="cm1.Views.BindingsView"
      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:vm="clr-namespace:cm1.ViewModels.Activity" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="BindingsView">

    <Grid>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <ListBox x:Name="lb" ItemsSource="{Binding Activities}">
                <ListBox.Resources>
                    <Style x:Key="PhotoRectStyle" TargetType="Rectangle">
                        <Setter Property="Width" Value="100"/>
                        <Setter Property="Height" Value="60"/>
                        <Setter Property="Margin" Value="0,0,20,0"/>
                        <Setter Property="Fill" Value="Pink"/>
                    </Style>
                    <DataTemplate DataType="{x:Type vm:MessageActivityViewModel}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Ellipse Grid.Column="0" Width="48" Height="48" Fill="Pink" Margin="0,0,12,0" VerticalAlignment="Top" />

                            <StackPanel Grid.Column="1">
                                <TextBlock Text="{Binding Title}" FontSize="16" FontWeight="SemiBold" />
                                <TextBlock Text="{Binding Message}"/>
                            </StackPanel>

                        </Grid>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type vm:PhotoActivityViewModel}">

                        <StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                                <Rectangle Style="{StaticResource PhotoRectStyle}" />
                            </StackPanel>

                            <TextBlock Text="{Binding Caption}"/>

                        </StackPanel>
                    </DataTemplate>
                </ListBox.Resources>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>

            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,12">
                <TextBlock Text="Selected:"  Margin="0,0,6,0"/>
                <TextBlock Text="{Binding Path=SelectedItem.Title,ElementName=lb,Mode=OneWay}"/>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

这种写法,强行引入了在view里面 引入了 VM的命名空间,有点单向耦合了,比如现在换了vm的名字,xaml就要改,所以CM的做法也还是很推荐的。





本文由 安徽 合肥 杨洋 1991年的 英文名AY   ===来自网站 www.ayjs.net 编写

本文由 安徽 合肥 杨洋 1991年的 英文名AY   ===来自网站 www.ayjs.net 编写


这个示例的意思,在一个列表中有多种ViewModel,希望不同的vm按照对应的view显示

这个内容下篇再总结了


本文代码下载:Download




net framework 类库net5 中的替代类库

Microsoft.Expression.Interactions

System.Windows.Interactivity

Microsoft.Xaml.Behaviors.Wpf



其他Ay准备升级到net5的纯xaml库

【ay wpf markup】AY XAML应该这样玩【1/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩【2/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-写个计算器【3/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-for循环【4/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-ChangedHandler【5/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-ResourceCollection和ScriptHandler【6/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-ResourceObject【7/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-ScriptHandler组合,也是最常用的【8/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-语法集合【9/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-Tower of Hanoi【10/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-写个简单的移动【11/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-写个复杂的绘图【12/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-写个复杂的颜色环【13/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-获得焦点全选【14/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-把Additional.Operations当资源【15/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-给ListView创建数据【16/18】-WPF-aaronyang技术分享 (ayjs.net)

【ay wpf markup】AY XAML应该这样玩-和后台ViewModel交互,操作方法【17/18】-WPF-aaronyang技术分享 (ayjs.net)



默认代码模板

Window

<Window x:Class="Features.CrossPlatform.Views.ShellView"
        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"
        xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro.Platform"
        mc:Ignorable="d"
        Title="ShellView" Height="450" Width="800">
    <Grid>
     
    </Grid>
</Window>

Page

<Page x:Class="Features.CrossPlatform.Views.MenuView"
      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" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="">

    <Grid>

    </Grid>
</Page>

UserControl

<UserControl  x:Class="cm1.Views.FeatureView"
             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:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro.Platform"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>

    </Grid>
</UserControl>























推荐您阅读更多有关于“wpfcm,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘C# .NET CORE,vue前端,JAVA开发,有想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui 工作是wpf,不接活,目前主要折腾maui

AYUI8社区版Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表