MVVMLight項(xiàng)目的綁定及使用方法是什么

這篇文章主要介紹“MVVMLight項(xiàng)目的綁定及使用方法是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“MVVMLight項(xiàng)目的綁定及使用方法是什么”文章能幫助大家解決問(wèn)題。

一、綁定：

 主要包含元素綁定和非元素綁定兩種。

1、元素綁定：

是綁定的最簡(jiǎn)單形式，源對(duì)象是WPF的元素，并且源對(duì)象的屬性是依賴項(xiàng)屬性。

根據(jù)我們之前的知識(shí) ，依賴項(xiàng)屬性具有內(nèi)置的更改通知支持。所以當(dāng)我們的源對(duì)象中改變依賴項(xiàng)屬性的值時(shí)，會(huì)立即更新目標(biāo)對(duì)象中的綁定屬性。

以上篇的例子來(lái)重寫(xiě)，我們不用額外定義全局公開(kāi)的屬性來(lái)支持?jǐn)?shù)據(jù)的顯示。

如下：

  <StackPanel Orientation="Vertical" HorizontalAlignment="Left" >
         <TextBox x:Name="WelcomeText" Width="200" Margin="10,10,0,0"></TextBox>
         <TextBlock Text="{Binding ElementName=WelcomeText,Path=Text,StringFormat='Hello \{0\}'}" Margin="10,10,0,0"></TextBlock>
  </StackPanel>

TextBlock 綁定了名稱為WelcomeText的元素，并且將Path指向Text屬性，所以他的值會(huì)跟著 WelcomeText的變化而變化。

2、非元素類(lèi)型綁定： 

2.1 Source屬性：

綁定具體的數(shù)據(jù)對(duì)象：如系統(tǒng)信息跟我們定義的資源數(shù)據(jù)。

定義Window下的全局資源

     <Window.Resources>
         <SolidColorBrush x:Key="BorderBrush">Red</SolidColorBrush>
     </Window.Resources>

應(yīng)用到視圖中

<StackPanel Margin="10,50,0,0" Orientation="Vertical" >
        <TextBlock Text="{Binding Source={x:Static SystemFonts.IconFontFamily},Path=Source}" ></TextBlock>
        <TextBlock Text="{Binding Source={StaticResource BorderBrush}}" Foreground="{Binding Source={StaticResource BorderBrush}}"  ></TextBlock>
</StackPanel>

結(jié)果：

2.2 RelativeSource 屬性：

設(shè)置該屬性 可以根據(jù)當(dāng)前目標(biāo)對(duì)象的相對(duì)關(guān)系指向源目標(biāo)。比如獲取當(dāng)前對(duì)象的父親對(duì)象、兄弟對(duì)象或者自身的其他屬性等一些數(shù)據(jù)。

<StackPanel Margin="10,50,0,0" Orientation="Vertical" ToolTip="top" >
      <StackPanel Orientation="Horizontal" >
          <TextBlock Width="150" Text="獲取自身寬度:"  ></TextBlock>
          <TextBlock Width="200" Text="{Binding Path=Width,RelativeSource={RelativeSource Mode=Self}}" ></TextBlock>
      </StackPanel>
      <StackPanel Orientation="Horizontal" ToolTip="parent" >
          <TextBlock Width="150" Text="查找上一層ToolTip:" ></TextBlock>  
          <TextBlock Text="{Binding Path=ToolTip,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type StackPanel}}}"></TextBlock>
      </StackPanel>
      <StackPanel Orientation="Horizontal">
          <TextBlock Width="150" Text="查找上二層ToolTip:" ></TextBlock>
          <TextBlock Text="{Binding Path=ToolTip,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type StackPanel},AncestorLevel=2}}"></TextBlock>
      </StackPanel>                               
</StackPan>

 代碼很容易理解，這邊在創(chuàng)建RelativeSource的時(shí)候，mode模式有四種類(lèi)型：

注意：AncestorType 指得是查找的對(duì)象類(lèi)型，AncestorLevel 代表搜索的層級(jí)的位置，如果是3，則忽略前兩個(gè)發(fā)現(xiàn)的元素。

結(jié)果：

2.3 DataContext 屬性：

如果想將一個(gè)對(duì)象綁定到一個(gè)由多個(gè)元素組成的視圖塊或者復(fù)合元素中，用DataContext 會(huì)更好開(kāi)發(fā)和維護(hù)。如下

<StackPanel Orientation="Vertical" DataContext="UInfo" >
    <StackPanel Orientation="Horizontal" >
        <TextBlock Text="名稱：" Width="100" ></TextBlock>
        <TextBox Text="{Binding Name}" Width="100" ></TextBox>
    </StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="性別：" Width="100" ></TextBlock>
        <TextBox Text="{Binding Sex}" Width="100" ></TextBox>
    </StackPanel>
</StackPanel>

二、綁定的各種使用場(chǎng)景：

數(shù)據(jù)綁定有普通的控件綁定應(yīng)用：比如 下拉框、單選框、復(fù)選框、普通文本框 、日期框等；

復(fù)雜的綁定有數(shù)據(jù)列表綁定，用戶控件信息綁定等，比如 ListBox，DataGrid，UserControl綁定等。

1、下拉框：

View代碼：

<StackPanel Margin="10,20,0,50">
  <TextBlock Text="下拉框" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
  <DockPanel x:Name="Combbox" >                
      <StackPanel DockPanel.Dock="Left" Width="240">
          <ComboBox Width="200" HorizontalAlignment="Left" ItemsSource="{Binding CombboxList}" SelectedItem="{Binding CombboxItem}" DisplayMemberPath="Text" SelectedValuePath="Key" ></ComboBox>
      </StackPanel>
      
      <StackPanel DockPanel.Dock="Right" Width="240" Orientation="Horizontal" DataContext="{Binding CombboxItem}" >
          <TextBlock Text="{Binding Key,StringFormat='結(jié)果：\{0\}'}" Margin="0,0,15,0" ></TextBlock>
          <TextBlock Text="{Binding Text}"></TextBlock>
      </StackPanel>
      
  </DockPanel>
</StackPanel>

 Model代碼：

 public class ComplexInfoModel:ObservableObject
    {
        private String key;
        /// <summary>
        /// Key值
        /// </summary>
        public String Key
        {
            get { return key; }
            set { key = value; RaisePropertyChanged(()=>Key); }
        }
        private String text;
        /// <summary>
        /// Text值
        /// </summary>
        public String Text
        {
            get { return text; }
            set { text = value; RaisePropertyChanged(()=>Text); }
        }
    }

 ViewModel代碼：

        #region 下拉框相關(guān)
         private ComplexInfoModel combboxItem;
         /// <summary>
         /// 下拉框選中信息
         /// </summary>
         public ComplexInfoModel CombboxItem
         {
             get { return combboxItem; }
             set { combboxItem = value; RaisePropertyChanged(() => CombboxItem); }
         }
 
 
         private List<ComplexInfoModel> combboxList;
         /// <summary>
         /// 下拉框列表
         /// </summary>
         public List<ComplexInfoModel> CombboxList
         {
             get { return combboxList; }
             set { combboxList = value; RaisePropertyChanged(()=>CombboxList); }
         }
         #endregio

說(shuō)明：CombboxItem是一個(gè)全局的屬性，作用在當(dāng)前頁(yè)面的數(shù)據(jù)上下文中，結(jié)果顯示的內(nèi)容指向下拉框中的選中值，達(dá)到共用一個(gè)數(shù)據(jù)的目的。 

這邊有四個(gè)地方需要注意的：ItemsSource：數(shù)據(jù)源；SelectedItem：選中的項(xiàng)；DisplayMemberPath：綁定時(shí)顯示的所屬值；SelectedValuePath ：綁定時(shí)候key的所屬值。 

結(jié)果：

2、單選框

    <StackPanel Margin="10,0,0,50">
         <TextBlock Text="單選框" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
         <DockPanel x:Name="RadioButton" >
             <StackPanel DockPanel.Dock="Left" Width="240">
                 <RadioButton Content="{Binding SingleRadio}" IsChecked="{Binding IsSingleRadioCheck}" HorizontalAlignment="Right" Width="240" >
                 </RadioButton>
             </StackPanel>
             <StackPanel DockPanel.Dock="Right" Width="240" Orientation="Horizontal">
                 <TextBlock Text="{Binding IsSingleRadioCheck,StringFormat='結(jié)果：\{0\}'}" ></TextBlock>
             </StackPanel>
         </DockPanel>
     </StackPanel>

說(shuō)明：注意這邊使用到了兩個(gè)屬性： SingleRadio，IsSingleRadioCheck，一個(gè)用于顯示單選框內(nèi)容，一個(gè)用于表示是否選中

結(jié)果：

3、組合單選框

我們一般會(huì)用單選框做組合表示唯一選項(xiàng)，比如性別包含男女，但是只能選擇一個(gè)。而更多的場(chǎng)景是包含多個(gè)選項(xiàng)，但是只能單選的，這時(shí)候就需要做單選框組。

  <StackPanel Margin="10,0,0,50">
       <TextBlock Text="組合單選框" FontWeight="Bold" FontSize="12" Margin="0,5,0,5"></TextBlock>
       <DockPanel x:Name="GroupRadioButton" >
           <StackPanel DockPanel.Dock="Left" Width="240">
               <ItemsControl ItemsSource="{Binding RadioButtons}">
                   <ItemsControl.ItemTemplate>
                       <DataTemplate>
                           <RadioButton Content="{Binding Content}" IsChecked="{Binding IsCheck}" GroupName="RadioButtons"
                                        Command="{Binding DataContext.RadioCheckCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl}}">  
                           </RadioButton>                                    
                       </DataTemplate>
                   </ItemsControl.ItemTemplate>
               </ItemsControl>
           </StackPanel>

           <StackPanel DockPanel.Dock="Right" Width="240" Orientation="Horizontal">
               <TextBlock Text="{Binding RadioButton.Content,StringFormat='結(jié)果：\{0\}'}" ></TextBlock>
           </StackPanel>
       </DockPanel>
  </StackPanel

這邊使用了ItemsControl，可以根據(jù)模板來(lái)定義內(nèi)容，我們?cè)谀０逯蟹胖梦覀冃枰玫降膬?nèi)容。這邊需要注意的是：GroupName用一樣的，來(lái)代表這是一個(gè)單選控件組合。

這邊有是三個(gè)屬性進(jìn)行綁定相關(guān)：

RadioButtons：?jiǎn)芜x框列表數(shù)據(jù)（循環(huán)綁定）；Content：?jiǎn)芜x框顯示的內(nèi)容；IsCheck：?jiǎn)芜x框的是否選中。 

結(jié)果：

4、復(fù)選框，復(fù)選框與單選框的使用情況類(lèi)似：

<StackPanel Margin="10,0,0,50">
            <TextBlock Text="復(fù)合框" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
            <DockPanel x:Name="GroupCheckButton" >
                <StackPanel DockPanel.Dock="Left" Width="240">
                    <ItemsControl ItemsSource="{Binding CheckButtons}" x:Name="cbt" >
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <CheckBox Content="{Binding Content}" IsChecked="{Binding IsCheck}"
                                             Command="{Binding DataContext.CheckCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ItemsControl}}"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>
                <StackPanel DockPanel.Dock="Right" Width="240" Orientation="Horizontal">
                    <TextBlock Text="{Binding CheckInfo,StringFormat='結(jié)果：\{0\}'}" ></TextBlock>
                </StackPanel>
            </DockPanel>
</StackPanel>

結(jié)果：

5、樹(shù)形控件

View代碼：

<StackPanel Margin="10,0,0,50">
            <TextBlock Text="樹(shù)" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
            <DockPanel x:Name="TreeButton" >
                <StackPanel DockPanel.Dock="Left" Width="240">
                        <TreeView ItemsSource="{Binding TreeInfo}" x:Name="tree" BorderThickness="0">
                        <TreeView.ItemTemplate>
                            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                                <TextBlock Text="{Binding NodeName}"/>
                            </HierarchicalDataTemplate>
                        </TreeView.ItemTemplate>
                    </TreeView>
                </StackPanel>
                
                <StackPanel DockPanel.Dock="Right" Width="240" Orientation="Horizontal" DataContext="{Binding SelectedItem,ElementName=tree}">
                        <TextBlock Text="結(jié)果："/>
                    <TextBlock Text="{Binding NodeID,StringFormat='NodeID：\{0\}'}"  Margin="0,0,20,0"  />
                    <TextBlock Text="{Binding NodeName,StringFormat='NodeName：\{0\}'}"/>
                </StackPanel>                    
            </DockPanel>
</StackPanel>

Model代碼

  public class TreeNodeModel : ObservableObject
     {
         public string NodeID { get; set; }
         public string NodeName { get; set; }
         public List<TreeNodeModel> Children { get; set; }
     }

ViewModel代碼

 #region 樹(shù)控件
        private List<TreeNodeModel> treeInfo;
        /// <summary>
        /// 樹(shù)控件數(shù)據(jù)信息
        /// </summary>
        public List<TreeNodeModel> TreeInfo
        {
            get { return treeInfo; }
            set { treeInfo = value; RaisePropertyChanged(()=>TreeInfo); }
        }
  #endregion

 結(jié)果：

6、ListBox

當(dāng)我們需要用到循環(huán)的列表內(nèi)容，并且模板化程度高的時(shí)候，建議使用ListBox來(lái)做綁定。

View代碼：

<StackPanel Margin="10,0,0,50" Orientation="Vertical" >
  <TextBlock Text="ListBox模板" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
      <DockPanel >
          <StackPanel HorizontalAlignment="Left" DockPanel.Dock="Left" >
              <ListBox x:Name="lb" ItemsSource="{Binding ListBoxData}" Width="500" BorderThickness="0" >
                  <ListBox.ItemsPanel>
                      <ItemsPanelTemplate>
                          <WrapPanel Width="{Binding ActualWidth,RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"/>
                      </ItemsPanelTemplate>
                  </ListBox.ItemsPanel>
                  <ListBox.ItemTemplate>
                      <DataTemplate>
                          <StackPanel>
                              <Image Source="{Binding Img}" Width="96" Height="96"/>
                              <TextBlock HorizontalAlignment="Center" Text="{Binding Info}"/>
                          </StackPanel>
                      </DataTemplate>
                  </ListBox.ItemTemplate>
              </ListBox>
          </StackPanel>
          <StackPanel DockPanel.Dock="Right" DataContext="{Binding SelectedItem,ElementName=lb}" Margin="15" Orientation="Vertical" >
              <TextBlock Text="{Binding Info,StringFormat='選中：\{0\}'}" ></TextBlock>
          </StackPanel>
      </DockPanel>
</StackPanel>

ViewModel代碼：

     #region ListBox 模板
      private IEnumerable listBoxData;
      /// <summary>
      /// LisBox數(shù)據(jù)模板
      /// </summary>
      public IEnumerable ListBoxData
      {
          get { return listBoxData; }
          set { listBoxData = value;RaisePropertyChanged(()=>ListBoxData); }
      }
      #endregion

初始數(shù)據(jù)：

private void InitListBoxList()
     {
      ListBoxData = new ObservableCollection<dynamic>(){
        new { Img="/MVVMLightDemo;component/Images/1.jpg",Info="櫻桃" },
        new { Img="/MVVMLightDemo;component/Images/2.jpg",Info="葡萄" },
        new { Img="/MVVMLightDemo;component/Images/3.jpg",Info="蘋(píng)果" },
        new { Img="/MVVMLightDemo;component/Images/4.jpg",Info="獼猴桃" },
        new { Img="/MVVMLightDemo;component/Images/5.jpg",Info="檸檬" },
     };

 結(jié)果：

7、用戶控件的集合綁定：

ListBox的列表綁定遠(yuǎn)遠(yuǎn)不能滿足我們實(shí)際工作中的需求，

出于對(duì)靈活性、復(fù)用性以及代碼精簡(jiǎn)的考慮，需要保證循環(huán)列表中的單個(gè)元素是獨(dú)立的元素片段，類(lèi)似Web中的局部視圖。 這時(shí)候，使用用戶控件會(huì)好很多。

我們先寫(xiě)一個(gè)用戶控件，分別設(shè)置了他的樣式和綁定的屬性值，如下：

<UserControl x:Class="MVVMLightDemo.Content.FruitInfoView"
              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.Resources>
             <Style TargetType="{x:Type StackPanel}">
                 <Style.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="RenderTransform">
                             <Setter.Value>
                                 <RotateTransform Angle="10"></RotateTransform>
                             </Setter.Value>
                         </Setter>
                         <Setter Property="Background" Value="#3B9CFB" />
                     </Trigger>
                 </Style.Triggers>
             </Style>
         </Grid.Resources>
         
         
         <StackPanel Orientation="Vertical" Margin="10">
             <Image Source="{Binding Img}" Width="96" Height="96" />
             <TextBlock HorizontalAlignment="Center" Text="{Binding Info}"/>
         </StackPanel>
         
     </Grid>
</UserControl>

 在目標(biāo)視圖頁(yè)面注冊(cè)并使用：

xmlns:Content="clr-namespace:MVVMLightDemo.Content"

<StackPanel Margin="10,0,0,50" Orientation="Vertical" >
                    <TextBlock Text="用戶控件模板列表" FontWeight="Bold" FontSize="12" Margin="0,5,0,5" ></TextBlock>
                    <StackPanel HorizontalAlignment="Left" Width="500" >
                         <ItemsControl ItemsSource="{Binding FiList}" HorizontalAlignment="Left" >
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Content:FruitInfoView />
                                </DataTemplate>                       
                            </ItemsControl.ItemTemplate>
                            <!-- 面板顯示模板 -->
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal">
                                    </WrapPanel>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
</StackPanel>

  結(jié)果：

關(guān)于“MVVMLight項(xiàng)目的綁定及使用方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。