Хобрук: Ваш путь к мастерству в программировании

Как предотвратить растяжение или расширение ListBoxItem, в котором есть элемент Image?

У меня есть ListBox, у которого есть сетка ItemsPanel. У меня есть несколько ListBoxItems, и я использую их с Grid.Column / Row, чтобы правильно расположить их в сетке. Я помещаю элемент Image в каждый ListBoxItem. Каждый элемент изображения имеет в качестве источника файл PNG размером 256x256.

Когда я запускал приложение, каждый ListBoxItems растягивается повсюду, а ListBox становится ужасающе огромным. Я не знаю, почему это происходит. Как предотвратить растяжение / расширение ListBoxItems, чтобы размер соответствовал родительскому элементу ListBox?

Я пробовал StretchDirection DownOnly для каждого изображения, но все по-прежнему растягивается. Вот мой XAML

<Grid>
    <ListBox Margin="10"
                BorderThickness="0"
                Focusable="True">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid IsItemsHost="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>


        <ListBoxItem Grid.Column="0"
                         Grid.Row="0"
                         Grid.ColumnSpan="3"
                         Grid.RowSpan="3">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="3"
                         Grid.Row="0">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="3"
                         Grid.Row="1">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="3"
                         Grid.Row="2">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="0"
                         Grid.Row="3">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="1"
                         Grid.Row="3">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>
        <ListBoxItem Grid.Column="2"
                         Grid.Row="3">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem> />
        <ListBoxItem Grid.Column="3"
                         Grid.Row="3">
            <Image Source="CCTV.png"
                     RenderOptions.BitmapScalingMode="HighQuality"
                     Stretch="Uniform"
                     StretchDirection="DownOnly" />
        </ListBoxItem>

    </ListBox>

</Grid>

Редактировать

Вот как выглядит проблема

Вот чего я хочу добиться, но с изображением внутри каждого ListBoxItem

22.05.2017

  • Установите ColumnDefinition Width = 256, если они имеют фиксированную ширину и высоту 22.05.2017

Ответы:


1

Необходимо ограничить размер изображения следующим образом:

<Image Source="{StaticResource Delete}" Width="16" Height="16" />
22.05.2017
Новые материалы

Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

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

Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..