1

Использую MVVM. Задача - сделать метрическую (upd. ВЕРТИКАЛЬНУЮ) шкалу. Пошел по пути полностью заполнить ListBox контролами ScaleMeter (без скроллинга и пустого места). ListBox распахивается на всю высоту окна. ListBox помещен в отдельный контрол SkipScaleView. Вот кусок его разметки.

    <ListBox ItemsSource="{Binding Meters}">
        <ListBox.DataContext>
            <local:SkipScaleViewModel/>
        </ListBox.DataContext>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <local:ScaleMeter LabelValue="{Binding LabelValue}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Его (SkipScaleView) CodeBehinde пустой.

В SkipScaleViewModel создаю ObservableCollection Meters.

У ScaleMeter есть свойство зависимости LabelValue.

У ScaleMeterModel есть свойство LabelValue.

Прошу пояснить, как регулировать высоту ScaleMeter в зависимости от высоты ListBox (или SkipScaleView).

UpDate 2 С решением VladD вышел казус. Я слишком упростил свой пример, с ним решение VladD работает, а в реальной жизни - нет. На самом деле элементов шкалы много, около 400 на всю высоту экрана. Высота каждого элемента маленькая и в таком случае метка LabelValue не может выйти за рамки ячейки UnifromGrid. Раньше (без MVVM) у меня это прокатывало с масшабированием. Метки я показываю (Visibility="{Binding IsLabelVisible}") не все, а только заканчивающиеся на 0. Разметка ScaleMeter:

<StackPanel x:Name="Root" Orientation="Horizontal"
                HorizontalAlignment="Right" >
        <TextBlock x:Name="labelValue"
                   FontSize="1"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Right"
                   Text="{Binding LabelValue}"
                   Visibility="{Binding IsLabelVisible}"
                   RenderTransformOrigin="1,0.5" >
            <TextBlock.RenderTransform>
                <ScaleTransform ScaleX="15" ScaleY="15" />
            </TextBlock.RenderTransform>
        </TextBlock>
        <Rectangle Stroke="Black"
                   Margin="10,0,0,0"
                   MinWidth="10" Height="1"
                   Visibility="{Binding IsLabelVisible}" />
        <Grid Width="20" Background="Blue" />
    </StackPanel>

ScaleMeter имеет:

DependencyProperty LabelValueDProperty DependencyProperty IsLabelVisibleDProperty

Увы - решение требует доработки.

P.S. Без MVVM знаю как сделать.

UpDate 1 Без MVVM упрощенно Может кому-то пригодится

Элемент шкалы.

<UserControl x:Class=".....Element"
             Height="{Binding ElementHeight}"
             >

Родительский контрол контейнер XAML:

    <UserControl x:Class="....Scale"
                 SizeChanged="Scale_SizeChanged"
                 >
<StackPanel x:Name="MyScale"
                            />

Его задний код (кусками):

double _elementHeight;
public double ElementHeight
        {
            get { return _elementHeight; }
            set
            {
                _elementHeight = value;
                OnPropertyChanged("ElementHeight");
            }
        }
private void CreateElements()
        {
            for (int i = 0; i < elementsCount; i++)
            {
                Element element = new Element();
                MyScale.Children.Add(element);
            }
        }
private void Scale_SizeChanged(object sender, SizeChangedEventArgs e)
    {
         ElementHeight  = e.NewSize.Height / elementsCount;
    }
3
  • 2
    <ListBox.DataContext> - плохо. Без MVVM знаю как сделать. - как? в зависимости от высоты ListBox - я предположу, что вам надо переопределить ItemsPanel например на StackPanel, чтоб элементы были на одной строке, а не шли друг под другом, тогда высота должна быть самого ListBox.
    – EvgeniyZ
    5 авг 2021 в 13:42
  • @EvgeniyZ Без MVVM вся логика находится в CodeBehind контрола-контейнера. Здесь я создаю элементы шкалы и знаю их количество. Знаю высоту контейнера, в обработчике изменения размера контейнера UserControl_SizeChanged вычисляю высоту, которая должна быть назначена элементам шкалы. В контроле элемента шкалы высота привязана в этой переменной
    – Eugene
    6 авг 2021 в 3:51
  • По идее, пойдёт container = uniformgrid
    – VladD
    6 авг 2021 в 9:53

1 ответ 1

1

Судя по всему, вам нужно вот это:

<ListBox ItemsSource="{Binding Meters}"
         HorizontalContentAlignment="Stretch"
         VerticalContentAlignment="Stretch"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
         ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="1"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:ScaleMeter LabelValue="{Binding LabelValue}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Получается:

анимашка


P. S.: Ваше решение тоже подойдёт, ведь ваш обработчик представляет собой чистую логику отображения, и, следовательно, никак не нарушает принципов MVVM. Но трюк с UniformGrid получается несколько изящнее.

4
  • Да, работает! Крутяк!!! Спасибо!!! Согласен лаконичнее/изящнее. P.S. В том то и дело, что у меня нет решения с использованием MVVM.
    – Eugene
    6 авг 2021 в 11:58
  • @Eugene: Так для этой задачи (равномерное распределение свободного места под элементы) MVVM и не нужен, это задача уровня отображения. А MVVM занимается связью между контентом и представлением.
    – VladD
    6 авг 2021 в 12:04
  • Вы не поняли. Когда у меня все было в одном месте, все работало. Когда я решил перестроить приложение с использованием MVVM эта подзадача перестала работать.
    – Eugene
    6 авг 2021 в 12:08
  • Влад, я сделал новый UpDate.
    – Eugene
    6 авг 2021 в 13:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.