WedX - журнал о программировании и компьютерных науках

XAML-разметка для Windows Phone

Есть ли решение XAML для этого примера? Меня интересует часть, где показаны полное имя и маленькая точка. В частности, я не могу поставить маленькую точку сразу после полного имени, если для полного имени достаточно места (первый элемент).

Теперь у меня есть это, но это не подходит, потому что точка всегда справа:

    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Path=Title}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
            Margin="0,-16,0,0"
            Style="{StaticResource PhoneTextExtraLargeStyle}" />
        <TextBlock Grid.Column="1" HorizontalAlignment="Right"
            Text="{Binding Path=IsOnline, Converter={StaticResource StatusFormatter}}" Opacity="0.6"
            Style="{StaticResource PhoneTextLargeStyle}"/>
    </Grid>

Образец


  • Чтобы избежать отрицательных голосов, опубликуйте что вы уже пробовали. 20.09.2012
  • Если вы добавите разделитель ColumnDefinition, он должен работать. Я не могу проверить это, поэтому я не буду публиковать его как ответ, но синтаксис будет следующим: ‹Grid.ColumnDefinitions› ‹ColumnDefinition Width=Auto/› ‹ColumnDefinition Width=*/› ‹ColumnDefinition Width=Auto/› ‹ /Grid.ColumnDefinitions› и поместите текст в столбец 0, а точку — в столбец 2. 20.09.2012
  • Не работает. Точка исчезает, если полное имя слишком длинное 21.09.2012
  • Вы хотите, чтобы точка всегда появлялась? если да, то где вы хотите точку? 21.09.2012
  • Точка обозначает статус в сети. Точка должна стоять сразу после полного имени, если оно занимает достаточно места на экране (Джон Доу), но если полное имя слишком длинное, точка должна быть выровнена по правому краю (Бенджамин Вашингтон). 21.09.2012

Ответы:


1

Вы можете попробовать следующий подход: привязать TextBlock MaxWidth к Widtd сетки минус ширина точки (например, 10 пикселей). Есть два варианта: использовать конвертер или привязку элемента. Вот как это сделать с помощью привязки элемента:

Сначала нам нужно создать элемент нужной ширины:

<Grid Grid.Row="0" Grid.Column="1"> 
    <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="10"/> 
    </Grid.ColumnDefinitions> 
    <Border x:Name="TextMaxWidth"/> <!-- this ActualWidth will be equals Grid.Width - 10 -->
</Grid> 

затем привяжите MaxWidth TextBlock к границе ActualWidth

<Grid Grid.Row="0" Grid.Column="1">  
    <Grid.ColumnDefinitions>  
    <!-- note that columns widths are changed; also you can use stack panel instead of grid -->
        <ColumnDefinition Width="Auto"/>  
        <ColumnDefinition Width="*"/>  
    </Grid.ColumnDefinitions>  
    <TextBlock Text="{Binding Path=Title}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  
        <!-- this will restrict texblock from growing more than Grid.Width - 10 -->
        MaxWidth="{Binding ActualWidth,ElementName=TextMaxWidth}"
        Margin="0,-16,0,0"  
        Style="{StaticResource PhoneTextExtraLargeStyle}" />  
    <TextBlock Grid.Column="1" HorizontalAlignment="Right"  
        Text="{Binding Path=IsOnline, Converter={StaticResource StatusFormatter}}" Opacity="0.6"  
        Style="{StaticResource PhoneTextLargeStyle}"/>  
</Grid>  

Также вы можете привязать TextBlock MaxWidth напрямую к ActualWidth сетки, используя конвертер с вычитанием ширины точки.

Оффтоп: я думал, что конкурс ВК уже закончился? :)

21.09.2012
  • Да, Конкурс окончен, но я хочу закончить этот материал. 21.09.2012
  • Почему граница исчезла из вашего второго примера кода, а определения столбцов разные? 21.09.2012
  • Второй пример кода @Buddy является продолжением первого кода, вы должны использовать его все вместе. 21.09.2012
  • во второй части вы можете заменить сетку на StackPanel Orientation="Horizontal" 21.09.2012

  • 2

    Решил этот вопрос, написав Custom Panel:

    public class MyStackPanel : Panel
    {
        protected override Size MeasureOverride(Size availableSize)
        {
            Size newSize = new Size();
            UIElement firstChild = Children[0];
            UIElement secondChild = Children[1];
            secondChild.Measure(availableSize);
            firstChild.Measure(new Size(availableSize.Width - secondChild.DesiredSize.Width, availableSize.Height));
            newSize.Width = firstChild.DesiredSize.Width + secondChild.DesiredSize.Width;
            newSize.Height = firstChild.DesiredSize.Height;
            return newSize;
        }
    
        protected override Size ArrangeOverride(Size finalSize)
        {
            UIElement firstChild = Children[0];
            UIElement secondChild = Children[1];
            firstChild.Arrange(new Rect(0, 0, firstChild.DesiredSize.Width, firstChild.DesiredSize.Height));
            secondChild.Arrange(new Rect(firstChild.DesiredSize.Width, 0, secondChild.DesiredSize.Width,
                                         firstChild.DesiredSize.Height));
            return base.ArrangeOverride(finalSize);
        }
    }
    

    И XAML:

    <local:MyStackPanel Grid.Column="1">
        <TextBlock Text="{Binding Path=Title}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}" />
        <TextBlock Text="{Binding Path=IsOnline, Converter={StaticResource StatusFormatter}}"
                   Opacity="0.6"
                   Style="{StaticResource PhoneTextLargeStyle}"/>
    </local:MyStackPanel>
    
    21.09.2012
    Новые материалы

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..


    Для любых предложений по сайту: [email protected]