溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“MVVMLight項目的綁定及使用方法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“MVVMLight項目的綁定及使用方法是什么”文章能幫助大家解決問題。
主要包含元素綁定和非元素綁定兩種。
是綁定的最簡單形式，源對象是WPF的元素，并且源對象的屬性是依賴項屬性。
根據我們之前的知識 ，依賴項屬性具有內置的更改通知支持。所以當我們的源對象中改變依賴項屬性的值時，會立即更新目標對象中的綁定屬性。
以上篇的例子來重寫，我們不用額外定義全局公開的屬性來支持數據的顯示。
如下：
<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屬性，所以他的值會跟著 WelcomeText的變化而變化。
綁定具體的數據對象：如系統信息跟我們定義的資源數據。
定義Window下的全局資源
<Window.Resources> <SolidColorBrush x:Key="BorderBrush">Red</SolidColorBrush> </Window.Resources>
應用到視圖中
<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>結果：
設置該屬性 可以根據當前目標對象的相對關系指向源目標。比如獲取當前對象的父親對象、兄弟對象或者自身的其他屬性等一些數據。
<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>代碼很容易理解，這邊在創建RelativeSource的時候，mode模式有四種類型：
| Mode成員名稱 | 說明 | |
|---|---|---|
| FindAncestor | 引用數據綁定元素的父鏈中的上級。 這可用于綁定到特定類型的上級或其子類。 若要指定 AncestorType 和/或 AncestorLevel，這就是應使用的模式。 | |
| PreviousData | 允許在當前顯示的數據項列表中綁定上一個數據項（不是包含數據項的控件）。 | |
| Self | 引用正在其上設置綁定的元素，并允許你將該元素的一個屬性綁定到同一元素的其他屬性上。 | |
| TemplatedParent | 引用應用了模板的元素，其中此模板中存在數據綁定元素。 這類似于設置 TemplateBindingExtension，且僅在 Binding 位于模板內部時適用。 |
注意：AncestorType 指得是查找的對象類型，AncestorLevel 代表搜索的層級的位置，如果是3，則忽略前兩個發現的元素。
結果：
如果想將一個對象綁定到一個由多個元素組成的視圖塊或者復合元素中，用DataContext 會更好開發和維護。如下
<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>數據綁定有普通的控件綁定應用：比如 下拉框、單選框、復選框、普通文本框 、日期框等；
復雜的綁定有數據列表綁定，用戶控件信息綁定等，比如 ListBox，DataGrid，UserControl綁定等。
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='結果：\{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 下拉框相關
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說明：CombboxItem是一個全局的屬性，作用在當前頁面的數據上下文中，結果顯示的內容指向下拉框中的選中值，達到共用一個數據的目的。
這邊有四個地方需要注意的：ItemsSource：數據源；SelectedItem：選中的項；DisplayMemberPath：綁定時顯示的所屬值；SelectedValuePath ：綁定時候key的所屬值。
結果：
<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='結果：\{0\}'}" ></TextBlock>
</StackPanel>
</DockPanel>
</StackPanel>說明：注意這邊使用到了兩個屬性： SingleRadio，IsSingleRadioCheck，一個用于顯示單選框內容，一個用于表示是否選中
結果：
我們一般會用單選框做組合表示唯一選項，比如性別包含男女，但是只能選擇一個。而更多的場景是包含多個選項，但是只能單選的，這時候就需要做單選框組。
<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='結果：\{0\}'}" ></TextBlock>
</StackPanel>
</DockPanel>
</StackPanel這邊使用了ItemsControl，可以根據模板來定義內容，我們在模板中放置我們需要用到的內容。這邊需要注意的是：GroupName用一樣的，來代表這是一個單選控件組合。
這邊有是三個屬性進行綁定相關：
RadioButtons：單選框列表數據（循環綁定）；Content：單選框顯示的內容；IsCheck：單選框的是否選中。
結果：
<StackPanel Margin="10,0,0,50">
<TextBlock Text="復合框" 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='結果：\{0\}'}" ></TextBlock>
</StackPanel>
</DockPanel>
</StackPanel>結果：
View代碼：
<StackPanel Margin="10,0,0,50">
<TextBlock Text="樹" 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="結果："/>
<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 樹控件
private List<TreeNodeModel> treeInfo;
/// <summary>
/// 樹控件數據信息
/// </summary>
public List<TreeNodeModel> TreeInfo
{
get { return treeInfo; }
set { treeInfo = value; RaisePropertyChanged(()=>TreeInfo); }
}
#endregion結果：
當我們需要用到循環的列表內容，并且模板化程度高的時候，建議使用ListBox來做綁定。
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數據模板
/// </summary>
public IEnumerable ListBoxData
{
get { return listBoxData; }
set { listBoxData = value;RaisePropertyChanged(()=>ListBoxData); }
}
#endregion初始數據：
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="蘋果" },
new { Img="/MVVMLightDemo;component/Images/4.jpg",Info="獼猴桃" },
new { Img="/MVVMLightDemo;component/Images/5.jpg",Info="檸檬" },
};結果：
ListBox的列表綁定遠遠不能滿足我們實際工作中的需求，
出于對靈活性、復用性以及代碼精簡的考慮，需要保證循環列表中的單個元素是獨立的元素片段，類似Web中的局部視圖。 這時候，使用用戶控件會好很多。
我們先寫一個用戶控件，分別設置了他的樣式和綁定的屬性值，如下：
<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>在目標視圖頁面注冊并使用：
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>結果：
關于“MVVMLight項目的綁定及使用方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
