Программное обращение к дочернему элементу

@MaryVlady · Регистрация: 17.04.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте! Задача состоит в том, чтобы программно изменять ресурс элемента <Image>. То есть иконка возле элемента ListBox будет при необходимости меняться. Подскажите, пожалуйста, как обратиться к <Image> для установления необходимого изображения?

XML
1
2
3
4
5
6
7
8
9
10
<ListBox x:Name="LB_Groups" Grid.ColumnSpan="5" Height="360" Width="850" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Top" SelectionChanged="LB_Groups_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="Img/Box_Group.png" Width="38" Height="38"/>
                        <TextBlock Text="{Binding}" FontSize="30" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>

@romka1234123 · 17.04.2018, 21:32

XML
1
<Image x:Name = "Img1" Source="Img/Box_Group.png" Width="38" Height="38"/>

А потом можно будет обратиться к элементу из кода
Img1.Source...

@MaryVlady · 17.04.2018, 22:08 **[ТС]**

Могу так обратиться к любому элементу, но не к этому Image. Подчеркивает как ошибку

@romka1234123 · 17.04.2018, 22:43

В общем вот что нужно сделать:

XML
1
2
3
4
5
//Эту часть замени у себя 
<StackPanel Orientation="Horizontal">
      <Image Source="{Binding img}" Width="38" Height="38"/>
      <TextBlock Text="{Binding text}" FontSize="30"/>
</StackPanel>

Далее, для того что бы добавить новый элемен я не знаю где у тебя там на кнопку или еще куда добавляется новый элемент необходимо добавить сделающий код

C#
1
 LB_Groups.Items.Add(new { img = new Uri("pack://application:,,,/1.png"), text = "qweqweqw" });

Тоесть, каждый раз когда захочешь добавить элемент то прописываешь в код. к примеру:

C#
1
2
3
4
5
6
7
8
9
10
11
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();//Инициализация
                        //Добавляем новый элемент, после инициализации 
            LB_Groups.Items.Add(new { img = new Uri("pack://application:,,,/Img/Box_Group.png"), text = "qweqweqw" });
                        //Если хочешь заменить элемент то удаляй старый и добавляй новый, если хочешь сделать все по уму почитай как с коллекциями работать и интерфейс INotifyPropertyChanged 
        }
    }
}

Не забудь пути поменять для изображений

Если помогло напиши что все норм

@MaryVlady · 17.04.2018, 22:55 **[ТС]**

Спасибо, пробую! А как быть, если я заполняю ListBox данными из List?
То есть:

C#
1
2
List<string> list1 = new List<string>();
LB_Groups.ItemSource = list1;

@romka1234123 · 17.04.2018, 23:41

C#
1
2
3
4
5
6
7
8
List<string> list1 = new List<string>();
            list1.Add("1");
            list1.Add("2");
            list1.Add("3");
            foreach (var item in list1)
            {
                LB_Groups.Items.Add(new { img = new Uri("pack://application:,,,/1.png"), text = item.ToString() });
            }

@MaryVlady · 18.04.2018, 13:30 **[ТС]**

Огромное спасибо, Вы мне очень помогли! Навела красоту, как и хотела)

Не могли бы Вы еще подсказать, как обратно получить значение text?
Я никогда не сталкивалась с такой конструкцией, нагуглить не получается.

Мне необходимо получить значение выбранного элемента. То есть сейчас, если использовать

C#
1
string selectedText = list1.SelectedItem.ToString()

то в selectedText передается значение "{ img = ms-appx:///Img/Box_Group.png, text = Кондитерские изделия }". А мне нужно просто получить значение "Кондитерские изделия" ну или что-то другое, что выберет пользователь.

@romka1234123 · 19.04.2018, 19:17

Тогда изначально надо было по другому делать, сейчас погоди

Добавлено через 1 час 42 минуты
Начнем:
1. В пространстве имен объяви:

C#
1
2
using System.ComponentModel;
using System.Collections.ObjectModel;

2. Унаследуй интерфейс INotifyPropertyChanged
будет что то на подобии

C#
1
2
3
public partial class MainWindow : Window, INotifyPropertyChanged
    {
      ...

3. Объяви переменные и измени часть кода. И еще возможно если ты не закомментируешь старый код будет ошибка, так вот сначала закомментируй старый код потом это пиши

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
        private ObservableCollection<mdlListBoxSrc> lbItems { get; set; }//Это добавь обязательно
        public ObservableCollection<mdlListBoxSrc> LbItems { get { return lbItems; } set { lbItems = value; OnPropertyChanged("LbItems"); } }//Это добавь обязательно
 
        public MainWindow()//Это конструктор окна, у тебя возможно по другому называется
        {
            InitializeComponent();
            DataContext = this;//Это напиши обязательно
            LbItems = new ObservableCollection<mdlListBoxSrc>();//Это коллекция которая будет отображаться
        }
       //Это тоже обязательно добавь
        public class mdlListBoxSrc
        {
            public Uri uriImagePath { get; set; }
            public string Text { get; set; }
            //Если хочешь еще полей добавить просто добавляешь тут аналогичным образом
            //А потом в XAML разметке  установишь свойство которое должен отображать элемент
            //Как вот в этом текстблоке
            //<TextBlock Text="{Binding Path = Text, Mode=TwoWay}" FontSize="30"/>
            //Path - это те данные которые хочешь получить из коллекции
        }
        //Это тоже добавь
        #region Реализация интерфейса INotifyPropertyChanged, что бы узнать что что то изменилось
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(name));
        }
        #endregion
       
       //Это событие на нажатие левой кнопки мыши не обязательно, но посмотри что оно делает
       private void LB_Groups_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            //Таким образом получаешь данные
            textBox1.Text = (LB_Groups.SelectedItem as mdlListBoxSrc).Text;//Получение текста
        }
        //Это событие на нажатие кнопки, тоже для пробы добавь посмотри что будет происходить
       //Проспойлю: Будут добавляться новые записи, и ты будешь сразу это видеть
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //Добавляешь новый элемент при нажатии на кнопку, если конечно нужно добавлять во время работы программы
            LbItems.Add(new mdlListBoxSrc { uriImagePath = new Uri("pack://application:,,,/1.png"), Text = "qqqwe" });
        }

4. Теперь следующий шаг, необходимо изменить разметку

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ListBox x:Name="LB_Groups" 
                 Grid.ColumnSpan="5" 
                 Height="360" Width="150" Grid.Row="5" Background="Aqua"
                 Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Top" 
                 ItemsSource="{Binding LbItems, Mode=TwoWay}" MouseLeftButtonUp="LB_Groups_MouseLeftButtonUp">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=uriImagePath, Mode=TwoWay}" Width="38" Height="38"/>
                        <TextBlock Text="{Binding Path = Text, Mode=TwoWay}" FontSize="30"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="429,230,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

Посмотри что изменилось в разметке, думаю такой подход тебе больше понравится.
И совет тебе, изучай MVVM паттерн если хочешь на впф писать, иначе денег не дадут

Ну и на всякий случай вот полный код:
CodeBehind

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Collections.ObjectModel;
 
namespace WpfApplication1
{
    /// <summary>
    /// Логика взаимодействия для MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private ObservableCollection<mdlListBoxSrc> lbItems { get; set; }
        public ObservableCollection<mdlListBoxSrc> LbItems { get { return lbItems; } set { lbItems = value; OnPropertyChanged("LbItems"); } }
 
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            LbItems = new ObservableCollection<mdlListBoxSrc>();
        }
        public class mdlListBoxSrc
        {
            public Uri uriImagePath { get; set; }
            public string Text { get; set; }
            //Если хочешь еще полей добавить просто добавляешь тут аналогичным образом
            //А потом в XAML разметке  установишь свойство которое должен отображать элемент
            //Как вот в этом текстблоке
            //<TextBlock Text="{Binding Path = Text, Mode=TwoWay}" FontSize="30"/>
            //Path - это те данные которые хочешь получить из коллекции
        }
 
        #region Реализация интерфейса INotifyPropertyChanged, что бы узнать что что то изменилось
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(name));
        }
        #endregion
 
        private void LB_Groups_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            //Таким образом получаешь данные
            textBox1.Text = (LB_Groups.SelectedItem as mdlListBoxSrc).Text;
            textBlock1.Text = (LB_Groups.SelectedItem as mdlListBoxSrc).Text;
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            //Добавляешь новый элемент при нажатии на кнопку, если конечно нужно добавлять во время работы программы
            //Можешь так
            LbItems.Add(new mdlListBoxSrc { uriImagePath = new Uri("pack://application:,,,/1.png"), Text = "qqqwe" });
            //или так
            //LbItems.Add(new mdlListBoxSrc { uriImagePath = new Uri("pack://application:,,,/1.png"), Text = textBox1.Text });
        }
    }
}

и разметка

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ListBox x:Name="LB_Groups" 
                 Grid.ColumnSpan="5" 
                 Height="360" Width="150" Grid.Row="5" Background="Aqua"
                 Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Top" 
                 ItemsSource="{Binding LbItems, Mode=TwoWay}" MouseLeftButtonUp="LB_Groups_MouseLeftButtonUp">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=uriImagePath, Mode=TwoWay}" Width="38" Height="38"/>
                        <TextBlock Text="{Binding Path = Text, Mode=TwoWay}" FontSize="30"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="429,230,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="371,84,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="84" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="371,137,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
    </Grid>
</Window>

Напиши помогло или нет

@MaryVlady · 19.04.2018, 19:23 **[ТС]**

Огромное Вам спасибо за проделанную работу!! Сама ни за что не разобралась бы. Попробую сегодня все добавить, обязательно отпишусь о результатах.

@Casper-SC · 19.04.2018, 20:47

MaryVlady, весь код кидать не буду, но залью исходники. Классы ViewModelBase и RelayCommand там для наглядности. Лучше использовать библиотеки GalaSoft.MvvmLight. Поставить их можно через NuGet. Примеров в инете море.

Этот пример для UWP, так как я на скриншоте увидел, что пространство имён у Image из UWP, судя по всему. В нём по нажатии на кнопку загружается список с изображениями и при выборе одного из элементов списка на отдельном от ListBox(а) Image(e) отображается эта картинка. Это и есть MVVM паттерн.

Посоветую ещё поставить расширение к студии Xaml Styler.

C#
1
2
3
4
5
6
7
8
9
10
11
12
namespace ListBoxAndIcons.ViewModels
{
    public class ViewModelLocator
    {
        public ViewModelLocator()
        {
            Main = new MainViewModel();
        }
 
        public MainViewModel Main { get; set; }
    }
}

C#
1
2
3
4
5
6
7
8
9
10
11
using System;
 
namespace ListBoxAndIcons.ViewModels
{
    public class GroupItemViewModel : ViewModelBase
    {
        public string Text { get; set; }
 
        public Uri Resource { get; set; }
    }
}

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<Page x:Class="ListBoxAndIcons.Views.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:ListBoxAndIcons"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:viewModels="using:ListBoxAndIcons.ViewModels"
      DataContext="{Binding Path=Main, Source={StaticResource Locator}}"
      mc:Ignorable="d">
 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="0" />
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
 
        <Image Grid.Row="0"
               Width="38"
               Height="38"
               Margin="10,10,0,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Source="{Binding Path=SelectedGroup.Resource}" />
 
        <ListBox x:Name="_groupsListBox"
                 Grid.Row="1"
                 Margin="10,17,10,10"
                 HorizontalAlignment="Stretch"
                 ItemsSource="{Binding GroupItems}"
                 SelectedItem="{Binding Path=SelectedGroup, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate x:DataType="viewModels:GroupItemViewModel">
                    <StackPanel Orientation="Horizontal">
                        <Image Height="38"
                               MinWidth="38"
                               Source="{Binding Resource}" />
                        <TextBlock FontSize="30" Text="{Binding Text}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
 
        <Button Grid.Row="2"
                Width="100"
                Margin="10,9,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Command="{Binding UpdateGroupsCommand}"
                Content="Add items" />
    </Grid>
</Page>

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.ObjectModel;
using System.Windows.Input;
 
namespace ListBoxAndIcons.ViewModels
{
    public class MainViewModel : ViewModelBase
    {
        private GroupItemViewModel _selectedGroup;
 
        public MainViewModel()
        {
            GroupItems = new ObservableCollection<GroupItemViewModel>();
            UpdateGroupsCommand = new RelayCommand(UpdateGroups);
        }
 
        public ObservableCollection<GroupItemViewModel> GroupItems { get; private set; }
 
        /// <summary>
        /// Выбранный элемент в списке должен сюда передаваться с помощью биндинга.
        /// </summary>
        public GroupItemViewModel SelectedGroup
        {
            get { return _selectedGroup; }
            set
            {
                _selectedGroup = value;
                OnPropertyChanged();
            }
        }
 
        private void UpdateGroups()
        {
            for (int i = 1; i < 5; i++)
            {
                //string path = $"pack://application:,,,/Assets/Icons/{i:D3}.jpg";
                string path = $"ms-appx:///Assets/Icons/{i:D3}.jpg";
                Uri icon = new Uri(path, UriKind.Absolute);
 
                GroupItems.Add(new GroupItemViewModel
                {
                    Resource = icon,
                    Text = $"Resource {i}"
                });
            }
        }
 
        public ICommand UpdateGroupsCommand { get; private set; }
    }
}

@Casper-SC · 19.04.2018, 21:02

Вот ещё тут море примеров на самые разные темы: https://github.com/Microsoft/W... al-samples

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@MaryVlady 0 / 0 / 0 Регистрация: 17.04.2018 Сообщений: 11
	17.04.2018, 22:08 [ТС]
	Могу так обратиться к любому элементу, но не к этому Image. Подчеркивает как ошибку Миниатюры 0

@MaryVlady 0 / 0 / 0 Регистрация: 17.04.2018 Сообщений: 11
	19.04.2018, 19:23 [ТС]
	Огромное Вам спасибо за проделанную работу!! Сама ни за что не разобралась бы. Попробую сегодня все добавить, обязательно отпишусь о результатах. 0

@Casper-SC 4434 / 2094 / 404 Регистрация: 27.03.2010 Сообщений: 5,657 Записей в блоге: 1
	19.04.2018, 21:02
	Вот ещё тут море примеров на самые разные темы: https://github.com/Microsoft/W... al-samples 0

Программное обращение к дочернему элементу

Решение