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

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

How can i bind to my viewModel inside my ItemTemplate?

问题

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

<ItemsRepeater
    x:Name="ChannelList"
    ItemsSource="{x:Bind ViewModel.ChannelSource}">
    <DataTemplate x:Name="ChannelTemplate">
        <Border
            Margin="0,0,0,10"
            BorderBrush="LightGray"
            BorderThickness="1">
            <StackPanel
                Orientation="Horizontal"
                Margin="10"
                Spacing="20">
                <!--content-->
                <TextBlock
                    Grid.Row="0"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"> 
                    <Run Text="Kanal: " />
                    <Run Text="{Binding ChannelId}" />
                </TextBlock>
                <Button
                    Grid.Column="0"
                    Grid.Row="1"
                    HorizontalAlignment="Left"
                    Content="Start" />
                <Button
                    Grid.Column="1"
                    Grid.Row="1"
                    HorizontalAlignment="Right"
                    Content="Stop" />
                <Button
                    Grid.Row="2"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"
                    Content="Kanal Entfernen"
                    Command="{Binding ??}" />
            </StackPanel>
        </Border>
    </DataTemplate>
</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.

英文:
<ItemsRepeater
    x:Name="ChannelList"
    ItemsSource="{x:Bind ViewModel.ChannelSource}">
    <DataTemplate x:Name="ChannelTemplate">
        <Border
            Margin="0,0,0,10"
            BorderBrush="LightGray"
            BorderThickness="1">
            <StackPanel
                Orientation="Horizontal"
                Margin="10"
                Spacing="20">
                <!--content-->
                <TextBlock
                    Grid.Row="0"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"> 
                    <Run Text="Kanal: " />
                    <Run Text="{Binding ChannelId}" />
                </TextBlock>
                <Button
                    Grid.Column="0"
                    Grid.Row="1"
                    HorizontalAlignment="Left"
                    Content="Start" />
                <Button
                    Grid.Column="1"
                    Grid.Row="1"
                    HorizontalAlignment="Right"
                    Content="Stop" />
                <Button
                    Grid.Row="2"
                    Grid.ColumnSpan="2"
                    HorizontalAlignment="Center"
                    Content="Kanal Entfernen"
                    Command="{Binding ??}" />
            </StackPanel>
        </Border>
    </DataTemplate>
</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"时已知的问题。但幸运的是,有一个解决方法。

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

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace WinUI3App;

public partial class Channel : ObservableObject
{
    [ObservableProperty]
    private int channelId;

    public ViewModel? Parent { get; set; }
}

public partial class ViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<Channel> channelSource = new();

    public ViewModel()
    {
        channelSource.Add(new Channel { ChannelId = 1, Parent = this });
        channelSource.Add(new Channel { ChannelId = 2, Parent = this });
        channelSource.Add(new Channel { ChannelId = 3, Parent = this });
    }

    [RelayCommand]
    private void RemoveChannel(Channel channel)
    {
        ChannelSource.Remove(channel);
    }
}

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

<Page
    x:Class="WinUI3App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:WinUI3App"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">
    <Grid>
        <ItemsRepeater
            x:Name="ChannelList"
            ItemsSource="{x:Bind ViewModel.ChannelSource}">
            <DataTemplate
                x:Name="ChannelTemplate"
                x:DataType="local:Channel">
                <Border
                    Margin="0,0,0,10"
                    BorderBrush="LightGray"
                    BorderThickness="1">
                    <StackPanel
                        Margin="10"
                        Orientation="Horizontal"
                        Spacing="20">
                        <!-- 内容 -->
                        <TextBlock
                            Grid.Row="0"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Center">
                            <Run Text="Kanal: " />
                            <Run Text="{x:Bind ChannelId}" />
                        </TextBlock>
                        <Button
                            Grid.Row="1"
                            Grid.Column="0"
                            HorizontalAlignment="Left"
                            Content="Start" />
                        <Button
                            Grid.Row="1"
                            Grid.Column="1"
                            HorizontalAlignment="Right"
                            Content="Stop" />
                        <Button
                            Grid.Row="2"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Center"
                            Command="{x:Bind Parent.RemoveChannelCommand}"
                            CommandParameter="{x:Bind}"
                            Content="Kanal Entfernen" />
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsRepeater>
    </Grid>
</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:

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace WinUI3App;

public partial class Channel : ObservableObject
{
    [ObservableProperty]
    private int channelId;

    public ViewModel? Parent { get; set; }
}

public partial class ViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection&lt;Channel&gt; channelSource = new();

    public ViewModel()
    {
        channelSource.Add(new Channel { ChannelId = 1, Parent = this });
        channelSource.Add(new Channel { ChannelId = 2, Parent = this });
        channelSource.Add(new Channel { ChannelId = 3, Parent = this });
    }

    [RelayCommand]
    private void RemoveChannel(Channel channel)
    {
        ChannelSource.Remove(channel);
    }
}

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

&lt;Page
    x:Class=&quot;WinUI3App.MainPage&quot;
    xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
    xmlns:d=&quot;http://schemas.microsoft.com/expression/blend/2008&quot;
    xmlns:local=&quot;using:WinUI3App&quot;
    xmlns:mc=&quot;http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
    Background=&quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&quot;
    mc:Ignorable=&quot;d&quot;&gt;
    &lt;Grid&gt;
        &lt;ItemsRepeater
            x:Name=&quot;ChannelList&quot;
            ItemsSource=&quot;{x:Bind ViewModel.ChannelSource}&quot;&gt;
            &lt;DataTemplate
                x:Name=&quot;ChannelTemplate&quot;
                x:DataType=&quot;local:Channel&quot;&gt;
                &lt;Border
                    Margin=&quot;0,0,0,10&quot;
                    BorderBrush=&quot;LightGray&quot;
                    BorderThickness=&quot;1&quot;&gt;
                    &lt;StackPanel
                        Margin=&quot;10&quot;
                        Orientation=&quot;Horizontal&quot;
                        Spacing=&quot;20&quot;&gt;
                        &lt;!--  content  --&gt;
                        &lt;TextBlock
                            Grid.Row=&quot;0&quot;
                            Grid.ColumnSpan=&quot;2&quot;
                            HorizontalAlignment=&quot;Center&quot;&gt;
                            &lt;Run Text=&quot;Kanal: &quot; /&gt;
                            &lt;Run Text=&quot;{x:Bind ChannelId}&quot; /&gt;
                        &lt;/TextBlock&gt;
                        &lt;Button
                            Grid.Row=&quot;1&quot;
                            Grid.Column=&quot;0&quot;
                            HorizontalAlignment=&quot;Left&quot;
                            Content=&quot;Start&quot; /&gt;
                        &lt;Button
                            Grid.Row=&quot;1&quot;
                            Grid.Column=&quot;1&quot;
                            HorizontalAlignment=&quot;Right&quot;
                            Content=&quot;Stop&quot; /&gt;
                        &lt;Button
                            Grid.Row=&quot;2&quot;
                            Grid.ColumnSpan=&quot;2&quot;
                            HorizontalAlignment=&quot;Center&quot;
                            Command=&quot;{x:Bind Parent.RemoveChannelCommand}&quot;
                            CommandParameter=&quot;{x:Bind}&quot;
                            Content=&quot;Kanal Entfernen&quot; /&gt;
                    &lt;/StackPanel&gt;
                &lt;/Border&gt;
            &lt;/DataTemplate&gt;
        &lt;/ItemsRepeater&gt;
    &lt;/Grid&gt;
&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
匿名

发表评论

匿名网友

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

确定