WP7 usercontrol - 当方向改变时改变控制宽度

时间:2011-05-25 01:54:37

标签: xaml windows-phone-7 user-controls orientation windows-phone

在我的一个应用程序中,我有一个名为FeedControl的用户控件(是的,它是另一个RSS阅读器!),这非常简单 - 只需一个复选框来选择项目,一个文本块显示提要名称,另一个文本块显示未读订阅源的数量。在启动时将feed加载到一个可观察的集合中,然后为每个feed创建一个控件实例,并将它们全部添加到列表框中 - 非常简单的东西。

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项目的列表框打开我希望Feed名称文本块更改为正确的大小(横向为560px,纵向为360px)所以我假设将网格列宽度设置为“* “或”自动“并且没有设置文本块的宽度,它会自动调整大小,但它只调整到文本宽度而不是整个宽度。

然后我尝试将文本块设置为XAML中的默认纵向大小(360)和页面方向更改事件我在ListBox中当前FeedControl的每个实例中调用以下方法:

    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 个答案:

答案 0 :(得分:2)

您应该为拥有您控件的ListBoxItems设置HorizontalAlignmentHorizontalContentAlignmentHorizontalAlignmentStretch。另外,设置控件的设计宽度/设计高度。

以下是我在列表框中的一个控件的示例,它以横向模式延伸。

<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设为ItemContainerStyle

var lbi = new ListBoxItem();
            var box = new ProgressBox();
...
            lbi.Tag = queueObject;
            lbi.Content = box;
            lbi.HorizontalAlignment = HorizontalAlignment.Stretch;
            lbi.HorizontalContentAlignment = HorizontalAlignment.Stretch;

答案 1 :(得分:0)

如果您放置此控件,则不会提及您。我想你把这个控件放在一个Phone页面里面;喜欢放置任何其他控件。如果这样更好,你可以管理该页面中的方向相关内容(容器页面),而不是在控件中进行调整。我认为这将解决您的问题。