WP7 usercontrol - 方向更改时更改控件宽度

Question

在我的一个应用程序中，我有一个名为 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 项目的列表框处于打开状态，我希望提要名称文本块更改为正确的大小（横向 560 像素，纵向 360 像素）所以我假设通过将网格列宽设置为“* " 或 "Auto" 并且没有设置文本块的宽度，它会自动调整大小，但它只会调整到文本的宽度，而不是整个宽度。

然后我尝试在 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 很抱歉帖子的长度......这么简单的问题太久了！！

Answer 1

您应该将您可以控制的 ListBoxItems 的 HorizontalAlignment 和 HorizontalContentAlignment 设置为 HorizontalAlignment.Stretch。另外，设置控件的设计宽度/设计高度。

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

<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;

Answer 2

你在哪里放置这个控件，你没有被提及。我认为您正在将此控件放在电话页面中；就像放置任何其他控件一样。如果这样更好，您可以在该页面（容器页面）中管理与方向相关的内容，而不是在控件中进行调整。我认为这将解决您的问题。