WP7 usercontrol - изменение ширины элемента управления при изменении ориентации - PullRequest
Новая
       10

WP7 usercontrol - изменение ширины элемента управления при изменении ориентации

1 голос
/ 25 мая 2011

В одном из моих приложений у меня есть пользовательский контроль под названием FeedControl (да, это еще одна программа для чтения RSS!), Которая очень проста - просто флажок, чтобы выбрать элемент, текстовый блок, чтобы показать имя канала, и другой текстовый блок, чтобы показатьколичество непрочитанных фидов.При загрузке каналов в наблюдаемую коллекцию при запуске я затем создаю один экземпляр элемента управления для каждого канала и добавляю их все в список - на самом деле довольно простые вещи.

Код XAML ниже: 

<UserControl x:Class="MyReader.FeedControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"             
Loaded="UserControl_Loaded" >

<Grid x:Name="LayoutRoot" Height="50" Background="Black" HorizontalAlignment="Left" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="70"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="70"/>
    </Grid.ColumnDefinitions>
    <CheckBox Name="Select" Grid.Column="0" IsChecked="{Binding IsSelected}" Margin="-5,-16" Checked="Select_Checked" Background="White"/>
    <TextBlock Name="FeedName" Grid.Column="1" Text="{Binding FeedName}" Opacity="1" Margin="-20" VerticalAlignment="Center" FontSize="24" 
               MouseLeftButtonUp="FeedName_MouseLeftButtonUp" Height="32" Width="360"/>
    <TextBlock Name="UnreadItems" Grid.Column="2" Text="{Binding UnreadItems}" Opacity="1" Padding="2" VerticalAlignment="Center" HorizontalAlignment="Right" 
               FontSize="24" MouseLeftButtonUp="FeedName_MouseLeftButtonUp" />
</Grid>

Когда меняется ориентация страницы, включается список элементов Feedcontrol. Я хочу, чтобы текстовое поле имени канала изменилось на правильный размер (560px для альбомной ориентации, 360px для портретной), поэтому я предположил, установивширина столбца сетки в «*» или «Авто» и не устанавливая ширину для текстового блока, он будет автоматически изменять размер, но он будет изменяться только по ширине текста, а не по всей ширине.

Итак, я попытался установить для текстового блока размер портрета по умолчанию (360) в XAML, и в случае изменения ориентации страницы я вызываю следующий метод в каждом экземпляре FeedControl, который в данный момент находится в ListBox: 

    public void ChangeOrientation(bool isLandscape)
    {

        if (isLandscape)
        {
            this.LayoutRoot.Width = App.LandscapeWidth;     //700
            this.FeedName.Width = App.LandscapeItemWidth;   //560
        }
        else
        {
            this.LayoutRoot.Width = App.PortraitWidth;      //480
            this.FeedName.Width = App.PortraitItemWidth;    //360
        }
        this.InvalidateArrange();
        this.InvalidateMeasure();
    }

Однако, это тоже не работает (независимо от того, что я пытаюсь), поэтому я не понимаю, как лучше это сделать ... Я знаю, что должен быть действительно простой способ, но пока я ненашел его.

Может кто-нибудь указать мне правильное направление, пожалуйста?

Майк

PS извините за длину сообщения ... так долго для такой простой проблемы!!

Ответы [ 2 ]

2 голосов
/ 26 мая 2011

Вы должны установить HorizontalAlignment и HorizontalContentAlignment на HorizontalAlignment. Stretch для элементов ListBoxItems, которые находятся под вашим контролем. Кроме того, установите ширину дизайна / высоту дизайна вашего элемента управления.

Вот пример одного из моих элементов управления в списке, который растягивается в ландшафтном режиме. 

<UserControl x:Class="SabWatch.Resources.Controls.ProgressBox"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Style="{StaticResource AppBackgroundStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

    </Grid>
</UserControl>

А вот пример настройки свойств выравнивания в коде. Вы также можете сделать это в XAML (и, возможно, использовать стиль и дать ListBox a ItemContainerStyle) 

var lbi = new ListBoxItem();
            var box = new ProgressBox();
...
            lbi.Tag = queueObject;
            lbi.Content = box;
            lbi.HorizontalAlignment = HorizontalAlignment.Stretch;
            lbi.HorizontalContentAlignment = HorizontalAlignment.Stretch;
0 голосов
/ 25 мая 2011

Где вы размещаете этот элемент управления, что вы не упомянуты.Я думаю, что вы размещаете этот элемент управления на странице телефона;как и любой другой элемент управления.Если так, то лучше управлять связанными с ориентацией материалами на этой странице (странице «Контейнер»), а не настраивать элемент управления.Я думаю, что это решит вашу проблему.

...