通过MVVM中的viewmodel将不同的值绑定到用户控件 [英] binding different values to user control through viewmodel in MVVM

问题描述

我有如下用户控制：

< usercontrol>

x：Class =ScoreCardInMVVM.Common.ImageButtonControl

xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns：x =http://schemas.microsoft.com/winfx / 2006 / xaml

xmlns：local =using：ScoreCardInMVVM.Common

xmlns：d =http://schemas.microsoft.com/expression/blend / 2008

xmlns：mc =http://schemas.openxmlformats.org/markup-compatibility/2006

xmlns：am =using：ScoreCardInMVVM.Model

mc：Ignorable =d

d：DesignHeight =300

d：DesignWidth =400>

< usercontrol.resources>

< local：heightconverter x：key =HeightConverterxmlns：x =＃unknownxmlns：local =＃unknown>



< usercontrol.datacontext>

< am：imagebuttoncontrolmodel xmlns：am =＃unknown>



< stackpanel height ={Binding Path = ActualHeight，ElementName = UserControl1}>

Width ={Binding Path = ActualWidth，ElementName = UserControl1}

已删除={Binding Path = BackGroundColor}

Orientation =Vertical>

<！ - < textblock text ={Binding Path = ImageText} margin =0,4,0,0>

FontSize =20Horizo​​ntalAlignment =CenterVerticalAlignment =Center/> - >

< Image Stretch =Fill

Source ={Binding ImageSourcePath}/>







Class如下：



class ImageButtonControlModel

{

公共字符串ImageText {get;组; } $ / $
public string ImageSourcePath {get;组; }

公共字符串BackGroundColor {get;组; }

public string ContentFontFamily {get;组; }

}



内页我有2个用户控件实例，如下所示：

imagebuttoncontrol x：name =tileDev0grid.row =3grid.column =1xmlns：x =＃unknownxmlns：uc =＃unknown/>

imagebuttoncontrol x：name =tileDev1grid.row =3grid.column =1xmlns：x =＃unknownxmlns：uc =＃unknown/>



我有以下页面的视图模型：

  class  MainPageViewModel 
 {
  private  ImageButtonControlModel ImageButtonControlModelObj =  new  ImageButtonControlModel （）; 
 
  public   string  txtImageText 
 {
  get  { return   投放; } 
  set  {ImageButtonControlModelObj.ImageText =  交付; } 
} 
 
  public   string  txtImageSourcePath 
 { 
  get  { return    / Assets / Delivery.png; } 
  set  {ImageButtonControlModelObj.ImageSourcePath =   /Assets/Delivery.png; } 
} 
 
  public   string  txtBackGroundColor 
 { 
  get  { return  ImageButtonControlModelObj.BackGroundColor; } 
  set  {ImageButtonControlModelObj.BackGroundColor =  蓝色; } 
} 
 
  public   string  txtContentFontFamily 
 { 
  get  { return    Arial; } 
  set  {ImageButtonControlModelObj.ContentFontFamily =   Arial; } 
} 

如何将2个不同的图像绑定到用户控制tileDev0& tileDev1到视图模型，（我有一个页面的viewmodel，通过它我试图将数据绑定到这个用户控件）

解决方案

pls somebody ans above quesiton

I have user control like below:
<usercontrol>
x:Class="ScoreCardInMVVM.Common.ImageButtonControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScoreCardInMVVM.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:am="using:ScoreCardInMVVM.Model"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<usercontrol.resources>
<local:heightconverter x:key="HeightConverter" xmlns:x="#unknown" xmlns:local="#unknown">

<usercontrol.datacontext>
<am:imagebuttoncontrolmodel xmlns:am="#unknown">

<stackpanel height="{Binding Path=ActualHeight,ElementName=UserControl1}">
Width="{Binding Path=ActualWidth,ElementName=UserControl1}"
removed="{Binding Path=BackGroundColor}"
Orientation="Vertical">
<!--<textblock text="{Binding Path=ImageText}" margin="0,4,0,0">
FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
<Image Stretch="Fill"
Source="{Binding ImageSourcePath}"/>



Class As below:

class ImageButtonControlModel
{
public string ImageText { get; set; }
public string ImageSourcePath { get; set; }
public string BackGroundColor { get; set; }
public string ContentFontFamily { get; set; }
}

Inside page I have 2 instances of user controls like below:
imagebuttoncontrol x:name="tileDev0" grid.row="3" grid.column="1" xmlns:x="#unknown" xmlns:uc="#unknown" />
imagebuttoncontrol x:name="tileDev1" grid.row="3" grid.column="1" xmlns:x="#unknown" xmlns:uc="#unknown" />

I have view model for page like below:

class MainPageViewModel
   {
       private ImageButtonControlModel ImageButtonControlModelObj = new ImageButtonControlModel();

       public string txtImageText
       {
           get { return "Delivery"; }
           set { ImageButtonControlModelObj.ImageText = "Delivery"; }
       }

       public string txtImageSourcePath
       {
           get { return "/Assets/Delivery.png"; }
           set { ImageButtonControlModelObj.ImageSourcePath="/Assets/Delivery.png"; }
       }

        public string txtBackGroundColor
       {
           get { return ImageButtonControlModelObj.BackGroundColor ; }
           set {  ImageButtonControlModelObj.BackGroundColor= "Blue"; }
       }

       public string txtContentFontFamily
       {
           get { return "Arial"; }
           set {ImageButtonControlModelObj.ContentFontFamily= "Arial" ; }
       }

How to bind 2 different images to user control tileDev0 & tileDev1 through view model , (I have viewmodel of a page through which I am trying to bind data to this user controls)

解决方案

pls somebody ans above quesiton

这篇关于通过MVVM中的viewmodel将不同的值绑定到用户控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！