如何通過單擊另一個串列視圖WPF中的元素來重繪串列視圖-有解無憂

我正在嘗試撰寫 POS 系統。我想要兩個串列，一個包含文章，當用戶單擊一篇文章時，該文章將添加到第二個串列中，并且串列會自動重繪。這是我的代碼

using Newtonsoft.Json;
    public class ArticlesDetailsViewModel : INotifyPropertyChanged, IArticleViewModel
    {
        public ArticlesDetailsViewModel()
        {
            string baseUrl = "http://api.market.csa.com/api/v1.1/Article/ListArticle";
            
            bool dr;
            using (HttpClient client = new HttpClient())
            {
                var response = client.GetAsync(baseUrl);
                var result = response.Result;
                dr = result.IsSuccessStatusCode;
            if (dr)
            {
                    string jsonstring = result.Content.ReadAsStringAsync().Result;
                    var articles = JsonConvert.DeserializeObject<ListArticleResponse>(jsonstring);
                    foreach(var art in articles.data)
                    {
                        ListArticle.Add(art);
                        
                    }
            }
            else
            {
                MessageBox.Show("Une erreur s'est produite lors de la recuration des articles, vérifiez votre connexion internet", "Error", MessageBoxButton.OK, MessageBoxImage.Error);

             }

            }
            //intializing ICollectionView using collection(ObservableCollection)
            ArticleCollection = CollectionViewSource.GetDefaultView(ListArticle);
            CommandeCollection = CollectionViewSource.GetDefaultView(ListCommande);




            ArticleCollection.Filter = Filter;
        }
        private ObservableCollection<ArticleModel> _ListArticle = new ObservableCollection<ArticleModel>();

        public ObservableCollection<ArticleModel> ListArticle
        {
            get { return _ListArticle; }
            set { _ListArticle= value;
                NotifyPropertyChanged("ListArticle");
            }
        }


        private ICollectionView _ArticleCollection;

        public ICollectionView ArticleCollection
        {
            get { return _ArticleCollection; }
            set { _ArticleCollection= value;
                NotifyPropertyChanged("ArticleCollection");
            }
        }

        private ICollectionView _CommandeCollection;

        public ICollectionView CommandeCollection
        {
            get { return _CommandeCollection; }
            set { _CommandeCollection=value;
                NotifyPropertyChanged("CommandeCollection");
            }
        }



        private bool Filter(object emp)
        {
            ArticleModel employee = emp as ArticleModel;
            //you can write logic for filter here
            if (!string.IsNullOrEmpty(ArticleName) && !string.IsNullOrEmpty(ArticleCode))
                return employee.NomArticle.Contains(ArticleName) && employee.NomArticle.Contains(ArticleName);
            else if (string.IsNullOrEmpty(ArticleName))
                return employee.Code.Contains(ArticleCode);
            else
                return employee.NomArticle.Contains(ArticleName);
        }

       
        private string _articleName = string.Empty;
        public string ArticleName
        {
            get { return _articleName;
                
                }
            set
            {
                _articleName=value;
                NotifyPropertyChanged("ArticleName");
                ArticleCollection.Refresh();
            }
        }


        private string _articleCode = string.Empty;
        public string ArticleCode
        {
            get { return _articleCode; }
            set
            {
                _articleCode= value;
                NotifyPropertyChanged("ArticleCode");
                ArticleCollection.Refresh();
            }
        }


        private ArticleModel _ArticleSelected = new ArticleModel();
        public ArticleModel ArticleSelected
        {
            get {
                return _ArticleSelected; }
            set
            {
                _ArticleSelected=value;
                
                NotifyPropertyChanged("ArticleSelected");
            }
        }

        

        private ObservableCollection<ArticleModel> _ListCommande = new ObservableCollection<ArticleModel>();

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
                PropertyChanged(this, new PropertyChangedEventArgs("CommandeCollection"));
            }
        }
        public ObservableCollection<ArticleModel> ListCommande
        {
            get
            {
                return _ListCommande;
            }
            set
            {
                _ListCommande= value;
                NotifyPropertyChanged("ListCommande");
            }
        }

    }
}

命令串列的 xaml：

<UserControl
    x:Class="WantaMarketDesktop.View.CommandesListingView"
    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="clr-namespace:WantaMarketDesktop.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="0.5*"/>
        </Grid.ColumnDefinitions>


        <ListView ScrollViewer.CanContentScroll="True" ScrollViewer.IsDeferredScrollingEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemsSource="{Binding CommandeCollection,UpdateSourceTrigger=PropertyChanged}" Grid.ColumnSpan="2" >

            <ListView.View>

                <GridView  AllowsColumnReorder="True" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True" >
                    <GridView.Columns>
                        <GridViewColumn Header=" ID" DisplayMemberBinding="{Binding IdArticle}"/>
                        <GridViewColumn Header="Nom" DisplayMemberBinding="{Binding NomArticle}"/>
                        <GridViewColumn Header="Quantite" DisplayMemberBinding="{Binding Quantite}"/>
                        <GridViewColumn Header="Prix" DisplayMemberBinding="{Binding Prix}"/>

                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
        <Label Grid.Row="1" Content="Montant total de la commande :   " FontSize="13"/>
        <Label Grid.Row="1" Grid.Column="1" FontWeight="SemiBold" Content="2750     XFA"  FontSize="17" Width="auto" VerticalAlignment="Center" HorizontalAlignment="Stretch" FontStyle="Normal"  />
    </Grid>
</UserControl>

xaml 文章串列

<UserControl x:Class="WantaMarketDesktop.View.ArticlesDetails"
             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" 
             xmlns:local="clr-namespace:WantaMarketDesktop.View"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,10,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="5">
            <TextBlock Text="Code  : " VerticalAlignment="Center" Margin="10,5,5,5"/>
            <TextBox Text="{Binding ArticleCode,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Width="200"/>

            <TextBlock Text="Nom  : " VerticalAlignment="Center" Margin="10,5,5,5"/>
            <TextBox Text="{Binding ArticleName,UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Width="200"/>
        </StackPanel>


        <StackPanel Grid.Row="1" Margin="10,0">
            <Separator HorizontalAlignment="Stretch" Height="5" Margin="0,5,0,10"/>
            <!--setting ItemsSource of ListView to ICollectionView-->
            <ListView Cursor="Hand" ItemsSource="{Binding ArticleCollection}" SelectedItem="{Binding ArticleSelected}" HorizontalAlignment="Stretch" VerticalAlignment="Top" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid  Columns="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate >
                        <StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <Image ToolTip="{Binding Carracteristique}"  Source="https://phonesdata.com/files/models/Xiaomi-Redmi-Note-10S-298.jpg" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="UniformToFill" MinHeight="50" MaxHeight="100"  />
                            <TextBlock Text="{Binding NomArticle}" ToolTip="{Binding NomArticle}" HorizontalAlignment="Stretch" FontSize="12" FontFamily="Franklin Gothic Medium" VerticalAlignment="Bottom" />
                            <WrapPanel Orientation="Horizontal" Margin="0,5,0,0">
                                <TextBlock  Text="{Binding Prix}"   HorizontalAlignment="Right" FontSize="11" FontFamily="Franklin Gothic Medium" VerticalAlignment="Bottom" />

                                <TextBlock Text="{Binding Code}" Margin="60,0,0,0"  HorizontalAlignment="Stretch" FontSize="9" FontFamily="Franklin Gothic Medium" VerticalAlignment="Center" />

                            </WrapPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
                
            </ListView>
           
        </StackPanel>
    </Grid>
</UserControl>

和介面

public interface IArticleViewModel
{
    ObservableCollection<ArticleModel> ListArticle { get; set; }
    ObservableCollection<ArticleModel> ListCommande { get; set; }
}

現在我有這個如何通過單擊另一個串列視圖 WPF 中的元素來重繪串列視圖

當我們點擊文章圖片時，我想這樣做，文章添加到左側的串列中

uj5u.com熱心網友回復：

所有依賴于相同資料 ( DataContext) 的控制元件必須共享視圖模型類 ( DataContext)的相同實體，這一點至關重要。

通常您不會DataContext明確設定。您使用DataContext繼承，其中所有子元素都隱式地DataContext從其父元素繼承它們。

ArticlesDetailsViewModel作為公共屬性添加到您的MainViewModel. 將設定MainViewModel為DataContext的MainWindow。然后讓兩個UserControl元素的公共父元素將其系結DataContext到ArticlesDetailsViewModelMainViewModel（當前 DataContext）的屬性。

不要忘記DataContext從所有UserControl建構式中洗掉賦值。

主視圖模型.cs

class MainViewModel : INotifyPropertyChanged
{
  // Shared instance
  public IArticleViewModel ArticlesDetailsViewModel { get; }

  public MainViewModel => this.ArticlesDetailsViewModel = new ArticlesDetailsViewModel();
}

主視窗.xaml.cs

partial class MainWindow : Window
{
  public MainWindow()
  {
    InitializeComponenet();
   
    this.DataContext = new MainViewModel();
  }
}

主視窗.xaml

<!-- DataContext is 'MainViewModel' ==> explcitly set -->
<Window>
    
  <!-- DataContext is 'MainViewModel' ==> inherited -->
  <StackPanel>
    
    <!-- DataContext is 'MainViewModel' ==> inherited -->
    <Button />
    
    <!-- DataContext is 'MainViewModel' ==> inherited -->
    <ListBox />
    
    <!-- DataContext is 'ArticlesDetailsViewModel' ==> explcitly set -->
    <StackPanel DataContext="{Binding ArticlesDetailsViewModel}">
    
      <!-- DataContext is 'ArticlesDetailsViewModel' ==> inherited -->
      <CommandesListingView />
    
      <!-- DataContext is 'ArticlesDetailsViewModel' ==> inherited -->
      <ArticlesDetails />
    </StackPanel>
  </StackPanel>
</Window>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/369089.html

標籤：C＃小白列表显示数据绑定可观察的集合

上一篇：我可以并且應該使用本地化的UTF-8字符存盤鍵值對嗎？

下一篇：限制惰性列中的專案