如何在我的ItemTemplate内绑定到我的viewModel？

huangapple
go评论88阅读模式
英文:

How can i bind to my viewModel inside my ItemTemplate?

问题

Sure, here's the translated code part without the request for translation:

  1. <ItemsRepeater
  2.     x:Name="ChannelList"
  3.     ItemsSource="{x:Bind ViewModel.ChannelSource}">
  4.     <DataTemplate x:Name="ChannelTemplate">
  5.         <Border
  6.             Margin="0,0,0,10"
  7.             BorderBrush="LightGray"
  8.             BorderThickness="1">
  9.             <StackPanel
  10.                 Orientation="Horizontal"
  11.                 Margin="10"
  12.                 Spacing="20">
  13.                 <!--content-->
  14.                 <TextBlock
  15.                     Grid.Row="0"
  16.                     Grid.ColumnSpan="2"
  17.                     HorizontalAlignment="Center"> 
  18.                     <Run Text="Kanal: " />
  19.                     <Run Text="{Binding ChannelId}" />
  20.                 </TextBlock>
  21.                 <Button
  22.                     Grid.Column="0"
  23.                     Grid.Row="1"
  24.                     HorizontalAlignment="Left"
  25.                     Content="Start" />
  26.                 <Button
  27.                     Grid.Column="1"
  28.                     Grid.Row="1"
  29.                     HorizontalAlignment="Right"
  30.                     Content="Stop" />
  31.                 <Button
  32.                     Grid.Row="2"
  33.                     Grid.ColumnSpan="2"
  34.                     HorizontalAlignment="Center"
  35.                     Content="Kanal Entfernen"
  36.                     Command="{Binding ??}" />
  37.             </StackPanel>
  38.         </Border>
  39.     </DataTemplate>
  40. </ItemsRepeater>

Please note that I cannot provide code suggestions or answers to your specific coding question as per your request. If you have any other non-translation-related questions, feel free to ask.

英文: 
  1. <ItemsRepeater
  2.     x:Name="ChannelList"
  3.     ItemsSource="{x:Bind ViewModel.ChannelSource}">
  4.     <DataTemplate x:Name="ChannelTemplate">
  5.         <Border
  6.             Margin="0,0,0,10"
  7.             BorderBrush="LightGray"
  8.             BorderThickness="1">
  9.             <StackPanel
  10.                 Orientation="Horizontal"
  11.                 Margin="10"
  12.                 Spacing="20">
  13.                 <!--content-->
  14.                 <TextBlock
  15.                     Grid.Row="0"
  16.                     Grid.ColumnSpan="2"
  17.                     HorizontalAlignment="Center"> 
  18.                     <Run Text="Kanal: " />
  19.                     <Run Text="{Binding ChannelId}" />
  20.                 </TextBlock>
  21.                 <Button
  22.                     Grid.Column="0"
  23.                     Grid.Row="1"
  24.                     HorizontalAlignment="Left"
  25.                     Content="Start" />
  26.                 <Button
  27.                     Grid.Column="1"
  28.                     Grid.Row="1"
  29.                     HorizontalAlignment="Right"
  30.                     Content="Stop" />
  31.                 <Button
  32.                     Grid.Row="2"
  33.                     Grid.ColumnSpan="2"
  34.                     HorizontalAlignment="Center"
  35.                     Content="Kanal Entfernen"
  36.                     Command="{Binding ??}" />
  37.             </StackPanel>
  38.         </Border>
  39.     </DataTemplate>
  40. </ItemsRepeater>

I wanted to bind inside my item template, but i could not figure out how to do this. Normal x:Bind or Binding does not work. Any suggestions?

答案1

得分: 0

这是使用"ItemsRepeaters"时已知的问题。但幸运的是，有一个解决方法。

我确定这个问题迟早会被修复，但现在可以使用以下方式来解决：

  1. using CommunityToolkit.Mvvm.ComponentModel;
  2. using CommunityToolkit.Mvvm.Input;
  3. using System.Collections.ObjectModel;
  5. namespace WinUI3App;
  7. public partial class Channel : ObservableObject
  8. {
  9.     [ObservableProperty]
  10.     private int channelId;
  12.     public ViewModel? Parent { get; set; }
  13. }
  15. public partial class ViewModel : ObservableObject
  16. {
  17.     [ObservableProperty]
  18.     private ObservableCollection<Channel> channelSource = new();
  20.     public ViewModel()
  21.     {
  22.         channelSource.Add(new Channel { ChannelId = 1, Parent = this });
  23.         channelSource.Add(new Channel { ChannelId = 2, Parent = this });
  24.         channelSource.Add(new Channel { ChannelId = 3, Parent = this });
  25.     }
  27.     [RelayCommand]
  28.     private void RemoveChannel(Channel channel)
  29.     {
  30.         ChannelSource.Remove(channel);
  31.     }
  32. }

注意：你可以使用"x:Bind"来设置"DataTemplate"的"x:DataType"。

  1. <Page
  2.     x:Class="WinUI3App.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.     xmlns:local="using:WinUI3App"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
  9.     mc:Ignorable="d">
  10.     <Grid>
  11.         <ItemsRepeater
  12.             x:Name="ChannelList"
  13.             ItemsSource="{x:Bind ViewModel.ChannelSource}">
  14.             <DataTemplate
  15.                 x:Name="ChannelTemplate"
  16.                 x:DataType="local:Channel">
  17.                 <Border
  18.                     Margin="0,0,0,10"
  19.                     BorderBrush="LightGray"
  20.                     BorderThickness="1">
  21.                     <StackPanel
  22.                         Margin="10"
  23.                         Orientation="Horizontal"
  24.                         Spacing="20">
  25.                         <!-- 内容 -->
  26.                         <TextBlock
  27.                             Grid.Row="0"
  28.                             Grid.ColumnSpan="2"
  29.                             HorizontalAlignment="Center">
  30.                             <Run Text="Kanal: " />
  31.                             <Run Text="{x:Bind ChannelId}" />
  32.                         </TextBlock>
  33.                         <Button
  34.                             Grid.Row="1"
  35.                             Grid.Column="0"
  36.                             HorizontalAlignment="Left"
  37.                             Content="Start" />
  38.                         <Button
  39.                             Grid.Row="1"
  40.                             Grid.Column="1"
  41.                             HorizontalAlignment="Right"
  42.                             Content="Stop" />
  43.                         <Button
  44.                             Grid.Row="2"
  45.                             Grid.ColumnSpan="2"
  46.                             HorizontalAlignment="Center"
  47.                             Command="{x:Bind Parent.RemoveChannelCommand}"
  48.                             CommandParameter="{x:Bind}"
  49.                             Content="Kanal Entfernen" />
  50.                     </StackPanel>
  51.                 </Border>
  52.             </DataTemplate>
  53.         </ItemsRepeater>
  54.     </Grid>
  55. </Page>

另外，如果你可以使用"ListView"或"GridView"代替"ItemsRepeater"，可以参考这个方式。

英文:

This is a known issue with ItemsRepeaters. But lucky for us, there's a workaround.

I'm sure that this will be fixed someday but for the moment:

  1. using CommunityToolkit.Mvvm.ComponentModel;
  2. using CommunityToolkit.Mvvm.Input;
  3. using System.Collections.ObjectModel;
  5. namespace WinUI3App;
  7. public partial class Channel : ObservableObject
  8. {
  9.     [ObservableProperty]
  10.     private int channelId;
  12.     public ViewModel? Parent { get; set; }
  13. }
  15. public partial class ViewModel : ObservableObject
  16. {
  17.     [ObservableProperty]
  18.     private ObservableCollection&lt;Channel&gt; channelSource = new();
  20.     public ViewModel()
  21.     {
  22.         channelSource.Add(new Channel { ChannelId = 1, Parent = this });
  23.         channelSource.Add(new Channel { ChannelId = 2, Parent = this });
  24.         channelSource.Add(new Channel { ChannelId = 3, Parent = this });
  25.     }
  27.     [RelayCommand]
  28.     private void RemoveChannel(Channel channel)
  29.     {
  30.         ChannelSource.Remove(channel);
  31.     }
  32. }

Note: You can use x:Bind by setting x:DataType of DataTemplate.

  1. &lt;Page
  2.     x:Class=&quot;WinUI3App.MainPage&quot;
  3.     xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
  4.     xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
  5.     xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot;
  6.     xmlns:local=&quot;using:WinUI3App&quot;
  7.     xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
  8.     Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot;
  9.     mc:Ignorable=&quot;d&quot;&gt;
  10.     &lt;Grid&gt;
  11.         &lt;ItemsRepeater
  12.             x:Name=&quot;ChannelList&quot;
  13.             ItemsSource=&quot;{x:Bind ViewModel.ChannelSource}&quot;&gt;
  14.             &lt;DataTemplate
  15.                 x:Name=&quot;ChannelTemplate&quot;
  16.                 x:DataType=&quot;local:Channel&quot;&gt;
  17.                 &lt;Border
  18.                     Margin=&quot;0,0,0,10&quot;
  19.                     BorderBrush=&quot;LightGray&quot;
  20.                     BorderThickness=&quot;1&quot;&gt;
  21.                     &lt;StackPanel
  22.                         Margin=&quot;10&quot;
  23.                         Orientation=&quot;Horizontal&quot;
  24.                         Spacing=&quot;20&quot;&gt;
  25.                         &lt;!--  content  --&gt;
  26.                         &lt;TextBlock
  27.                             Grid.Row=&quot;0&quot;
  28.                             Grid.ColumnSpan=&quot;2&quot;
  29.                             HorizontalAlignment=&quot;Center&quot;&gt;
  30.                             &lt;Run Text=&quot;Kanal: &quot; /&gt;
  31.                             &lt;Run Text=&quot;{x:Bind ChannelId}&quot; /&gt;
  32.                         &lt;/TextBlock&gt;
  33.                         &lt;Button
  34.                             Grid.Row=&quot;1&quot;
  35.                             Grid.Column=&quot;0&quot;
  36.                             HorizontalAlignment=&quot;Left&quot;
  37.                             Content=&quot;Start&quot; /&gt;
  38.                         &lt;Button
  39.                             Grid.Row=&quot;1&quot;
  40.                             Grid.Column=&quot;1&quot;
  41.                             HorizontalAlignment=&quot;Right&quot;
  42.                             Content=&quot;Stop&quot; /&gt;
  43.                         &lt;Button
  44.                             Grid.Row=&quot;2&quot;
  45.                             Grid.ColumnSpan=&quot;2&quot;
  46.                             HorizontalAlignment=&quot;Center&quot;
  47.                             Command=&quot;{x:Bind Parent.RemoveChannelCommand}&quot;
  48.                             CommandParameter=&quot;{x:Bind}&quot;
  49.                             Content=&quot;Kanal Entfernen&quot; /&gt;
  50.                     &lt;/StackPanel&gt;
  51.                 &lt;/Border&gt;
  52.             &lt;/DataTemplate&gt;
  53.         &lt;/ItemsRepeater&gt;
  54.     &lt;/Grid&gt;
  55. &lt;/Page&gt;

BTW, if you can use ListView or GridView instead of ItemsRepeater, you could do it this way.

huangapple
  • 本文由 发表于 2023年3月8日 18:06:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/75671660.html
  • .net
  • c#
  • winui-3
  • xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定