Im a new WPF and Im doing about MVVM. My problem is as follows: first I have 1 ObservableCollection. Here contains a list of my information. And I also make it an Icommand in the HomeViewModel so that it can bind to my button in the datatemplate.
In the View I have a xaml file that gets the datacontext from the HomeViewModel. And I can only bind the values in ObservableCollection or Icommand in ItemsSou[enter image description here][1]rce. But I want both . Maybe it's because my code logic is wrong but can anyone help me please.
here is the snippet of my ViewModel:
public class HomeViewModel: BaseViewModel
{
public ICommand AddCommand { get; set; }
public ICommand ChangeHomeBG { get; set; }
public ICommand LookBill { get; set; }
#region Khoi tao
private ObservableCollection<OderModel> oderviewmodel;
public ObservableCollection<OderModel> OderViewModel
{
get
{
if (oderviewmodel == null)
{
oderviewmodel = new ObservableCollection<OderModel>();
}
return oderviewmodel;
}
set
{
oderviewmodel = value;
//OnpropertyChanged(nameof(OderViewModel));
OnPropertyChanged(nameof(OderViewModel));
}
}
public HomeViewModel()
{
//Khởi tạo dữ liệu-vui lòng không làm quá nhiều tác vụ ở đây, bạn có thể sử dụng Tác vụ nếu cần
oderviewmodel = new ObservableCollection<OderModel>();
//oderviewmodel.Add(new OderModel { Name = "Meme", TenBan = "A8" });
for (int i = 0; i < 20; i )
{
oderviewmodel.Add(new OderModel { ID = "#00234", Status = "Đang phục vụ", SoNguoi = 8, TenBan = "A8", Price = Utils.ConvertMoney("100000"), Time = "3 Giờ 34 phút" });
}
LookBill = new RelayCommand<Window>((p) => { return true; }, (p) => MessageBox.Show("helo br"));
//AddCommand = new DelegateCommand<string>(
// (s) => true,
// (s) => OderViewModel.Add(new OderModel { ID = s})
// );
}
}
here is the snippet of my View:
<ItemsControl x:Name="OderViewModel" ItemsSource="{Binding OderViewModel}" ScrollBar.Scroll="ItemsControl_Scroll">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border>
<ItemsPresenter/>
</Border>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<!--<DataTemplate.Resources>
<Style>
-->
<!--Style in template-->
<!--
</Style>
</DataTemplate.Resources>-->
<Border BorderBrush="White" BorderThickness="1" Margin="15,0,0,15">
<Grid Width="186" Height="150">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="90*"/>
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<Grid x:Name="HedearCardHome" Grid.Row="0" Background="{DynamicResource StatusColorHome }">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="53*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="43*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock Text="{Binding DataContext.ID }"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="12"
Foreground="White"/>
</Grid>
<Grid Grid.Column="1">
<TextBlock Text="{Binding Status}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White"
FontSize="12"/>
</Grid>
<Grid Grid.Column="2">
<TextBlock Text="{Binding SoNguoi}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White"
FontSize="12" Margin="25,0,0,0"/>
<fa:FontAwesome Icon="User"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="12"
Foreground="White"/>
</Grid>
</Grid>
<Grid x:Name="ContentHeaderHome" Grid.Row="1" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55"/>
<ColumnDefinition Width="131"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Image Source="{StaticResource Hline}"
HorizontalAlignment="Right"/>
<TextBlock Text="{Binding TenBan}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontWeight="Bold"
FontSize="35"
Foreground="{DynamicResource StatusColorHome}"/>
</Grid>
<!--<Border BorderBrush="#F2F1F1" BorderThickness="0.3" >
</Border>-->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.RowSpan="2">
<Image Source="{DynamicResource Hline}"
VerticalAlignment="Bottom"
HorizontalAlignment="Center">
<Image.LayoutTransform>
<RotateTransform Angle="90"/>
</Image.LayoutTransform>
</Image>
<TextBlock Text="{Binding Price}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="26"
FontWeight="Bold"
Foreground="{DynamicResource StatusColorHome}">
</TextBlock>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<fa:FontAwesome Icon="ClockOutline"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource GrayTimeHome}"/>
</Grid>
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<TextBlock Text="{Binding Time}"
FontSize="11"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource GrayHome1}"/>
</Grid>
<Grid Grid.Column="3">
<fa:FontAwesome Icon="BirthdayCake"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="12"
Foreground="{DynamicResource StatusColorHome}"/>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid x:Name="FooterHome" Grid.Row="2" Background="{DynamicResource FooterHome}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="btn_HomeBill"
Background="{DynamicResource FooterHome}"
BorderBrush="{x:Null}" Command="{Binding LookBill}">
<Image Source="{StaticResource lookbill}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button>
</Grid>
<Grid Grid.Column="1">
<Button Background="{DynamicResource FooterHome}" BorderBrush="{x:Null}">
<Image Source="{StaticResource iconPrint}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button>
</Grid>
<Grid Grid.Column="2">
<StackPanel>
<Button Background="{DynamicResource FooterHome}"
BorderBrush="{x:Null}"
Command="{Binding Path=DataContext.LookBill}"
CommandParameter="{Binding}"
Margin="0,0,0,-2">
<Image Source="{StaticResource iconMoney}" VerticalAlignment="Center" HorizontalAlignment="Center" >
</Image>
</Button>
</StackPanel>
</Grid>
<!--<Grid Grid.Column="3">
<fa:FontAwesome Icon="EllipsisH"
FontSize="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource IconFooter}"/>
</Grid>-->
<Grid Grid.Column="3">
<materialDesign:PopupBox Foreground="{DynamicResource IconFooter}" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel>
<Button Content="More"/>
<Button Content="Option"/>
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
here is the snippet I want to Change:(ItemSource)
<ItemsControl x:Name="OderViewModel" ItemsSource="{Binding OderViewModel}" ScrollBar.Scroll="ItemsControl_Scroll">
And Here why im not binding Icommand in button ?
<Grid Grid.Column="0">
<Button x:Name="btn_HomeBill"
Background="{DynamicResource FooterHome}"
BorderBrush="{x:Null}" Command="{Binding LookBill}">
<Image Source="{StaticResource lookbill}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button>
</Grid>
CodePudding user response：
The btn_HomeBill button is inside your ItemsControl.ItemTemplate. This means that its DataContext is OderModel and no longer HomeViewModel where you have access to LookBill.
You should be able to change the binding to this:
<Button x:Name="btn_HomeBill"
...
Command="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.LookBill}" />