locked
Возможно ли не указывать точную ширину контрола, но чтобы при этом он заполнял всю ширину, что ему дает родительский контрол? RRS feed

  • Вопрос

  • Всем, доброе время суток.

    Подсобите, плиз, вот с какой проблемой

    Использую стандартный Pivot со стандартным ListBox'ом. Элементы листбокса - UserControl'ы

    Если не указывать жестко ширину контролов, то она "плавает" в зависимости от того, какой там текст

          

     


    Sources:

    1 <!-- Custom control XAML --> 
    2 <UserControl x:Class="LJ_demo.LJ_OnePostControl" 
    3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    5     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    6     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    7     mc:Ignorable="d" 
    8     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    9     FontSize="{StaticResource PhoneFontSizeNormal}" 
    10     Foreground="{StaticResource PhoneForegroundBrush}" 
    11     d:DesignHeight="200"
    12  
    13     <Grid x:Name="LayoutRoot" Background="AliceBlue"
    14         <Grid.RowDefinitions> 
    15             <RowDefinition Height="Auto"></RowDefinition> 
    16             <RowDefinition Height="Auto"></RowDefinition> 
    17             <RowDefinition Height="*"></RowDefinition> 
    18         </Grid.RowDefinitions> 
    19         <StackPanel  
    20             Grid.Row="0"  
    21             HorizontalAlignment="Left"  
    22             Name="StackPanelAuthorInfo"  
    23             Orientation="Horizontal"  
    24             VerticalAlignment="Top"  
    25             Margin="3" 
    26             > 
    27             <Image x:Name="AvatarAuthor" Source="Images/lj_user_image.jpg" Stretch="None" /> 
    28             <Image x:Name="IconAuthor" Source="Images/userinfo.png" Stretch="None"  Margin="10,0,0,0" VerticalAlignment="Bottom"/> 
    29             <TextBlock x:Name="TxtBlockAuthor"  
    30                        Text="Author"  
    31                        Foreground="RoyalBlue"  
    32                        Margin="10,0,10,0"  
    33                        VerticalAlignment="Bottom"  
    34                        FontWeight="Bold"/> 
    35         </StackPanel> 
    36         <TextBlock x:Name="TxtBlockSubject"  
    37                    Text="{Binding DataSubject}"  
    38                    Grid.Row="1" 
    39                    VerticalAlignment="Top"  
    40                    Foreground="Navy"  
    41                    FontWeight="Bold"  
    42                    FontSize="18"  
    43                    Margin="3"/> 
    44         <TextBlock x:Name="TxtBlockText"  
    45                    Text="{Binding DataText}"  
    46                    Grid.Row="2" 
    47                    VerticalAlignment="Top"  
    48                    HorizontalAlignment="Left" 
    49                    Height="100"  
    50                    Foreground="Black"  
    51                    Margin="3"  
    52                    TextWrapping="Wrap" FontSize="18" /> 
    53     </Grid> 
    54 </UserControl> 
    55  
    56  
    57 <!-- MainPage XAML --> 
    58     <!--LayoutRoot is the root grid where all page content is placed--> 
    59     <Grid x:Name="LayoutRoot" Background="Transparent"
    60         <Grid.RowDefinitions> 
    61             <RowDefinition Height="Auto"/> 
    62             <RowDefinition Height="*"/> 
    63         </Grid.RowDefinitions> 
    64         <!-- Title --> 
    65         <Image Grid.Row="0" Source="Images/LJ_title_image.jpg" Opacity="1" Margin="0,0,0,0" DataContext="{Binding}"></Image> 
    66  
    67         <!-- Pivot menu --> 
    68         <controls:Pivot 
    69             x:Name="pivotMenu" 
    70             FontSize="8" FontFamily="Arial" Grid.Row="1" Margin="0,0,0,0" > 
    71             <controls:Pivot.Background> 
    72                 <LinearGradientBrush> 
    73                     <GradientStop Color="Orange" Offset="0"/> 
    74                     <GradientStop Color="Blue" Offset="1"/> 
    75                 </LinearGradientBrush> 
    76             </controls:Pivot.Background> 
    77  
    78             <!--Pivot item one--> 
    79             <controls:PivotItem Name="PivotPageView" Header="View"
    80                 <ListBox x:Name="PivotPageViewListBox" Margin="0,0,0,0" ItemsSource="{Binding Path=ViewItems}"
    81                     <ListBox.ItemTemplate> 
    82                         <DataTemplate> 
    83                             <StackPanel Height="200" Margin="0,0,0,17" HorizontalAlignment="Left"
    84                                 <CC:LJ_OnePostControl/> 
    85                             </StackPanel> 
    86                         </DataTemplate> 
    87                     </ListBox.ItemTemplate> 
    88                 </ListBox> 
    89             </controls:PivotItem> 
    90  
    91             <!--Pivot item two--> 
    92             <controls:PivotItem Name="PivotPageFriends" Header="Friends"
    93                 <!--Triple line list no text wrapping--> 
    94                 <ListBox x:Name="PivotPageFriendsListBox" Margin="0,0,-12,0" ItemsSource="{Binding FriendsItems}"
    95                     <ListBox.ItemTemplate> 
    96                         <DataTemplate> 
    97                             <StackPanel Height="200" Margin="0,0,0,17"
    98                                 <CC:LJ_OnePostControl/> 
    99                             </StackPanel> 
    100                         </DataTemplate> 
    101                     </ListBox.ItemTemplate> 
    102                 </ListBox> 
    103             </controls:PivotItem> 
    104  
    105         </controls:Pivot> 
    106  
    107     </Grid> 
    108   



    мне бы хотелось задавать не жесткие значения ширины, а пропорциональные - чтобы контрол занимал всю ширину, предоставляемую ему родительским контролом, но в то же время не хочется использовать жесткие значения.

    Иначе, например,  при схеме ориентации придется каждый раз анализировать и задавать новую ширину.

     

    Есть ли такая возможность?



    • Изменено ealexash 4 октября 2011 г. 16:15
    4 октября 2011 г. 16:05

Ответы

  • спасибо за ссылки.

    а решение проблемы все-таки нашлось.

    Как мне посоветовали на англоязычном форуме:

    I don't think setting the StackPanel's HorizontalAlignment="Stretch" alone is enough to make the ListBoxItem full width. The problem is that the ListBox has a property HorizontalContentAlignment that defaults to Left, and you have to change this as well.

    I haven't been able to make it work by setting HorizontalContentAlignment directly in the ListBox definition, but it works if you set it by creating a style.
        <phone:PhoneApplicationPage.Resources> 
     
            <Style x:Key="ListBoxItemStretchContentStyle" TargetType="ListBoxItem"> 
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
            </Style> 
     
        </phone:PhoneApplicationPage.Resources> 
    In the ListBox, apply it to the ItemContainerStyle property.

     <ListBox  ItemContainerStyle="{StaticResource ListBoxItemStretchContentStyle}" ... 

    Этого достаточно для выравнивания самого контрола.
    Плюс, у меня в приведенном примере после всех экспериментов остался мусор и нужно stretch'ить CustomCintrol, иначе сам контрол будет выровнен, а текст внутри него - нет


    • Помечено в качестве ответа ealexash 5 октября 2011 г. 7:41
    • Изменено ealexash 5 октября 2011 г. 8:00
    5 октября 2011 г. 7:32

Все ответы

  • Лично моё мнение, что эта задача может решиться используя привязку данных.


    • Изменено PetrishkoMVP 4 октября 2011 г. 18:31
    4 октября 2011 г. 18:30
  • ну, вообще-то именно так я и сделал.

    Но по тому, какие возможности дает XAML, предполагал, что и эту задачу он может решить. Но сам такого способа не нашел

    Т.е. вопрос вызван не проблемой в реализации задачи, а поиском данной возможности - есть она, в принципе, или нет
    • Изменено ealexash 4 октября 2011 г. 19:37
    4 октября 2011 г. 19:32
  • Рекомендую обратится к Станиславу Павлову - это Developer Evangelist из Microsoft, отлично ориентирующийся в XAML (контакты: твиттер @stasus , блог http://blogs.msdn.com/stasus), а также MVP по Silverlight - Сергей Пугачёв (твиттер @spugachev , личная страничка http://pugachev.info ). Надеюсь, контакты окажутся полезными.
    Как я понимаю Вы хотите чтобы контрол занимал всю ширину пространства? Посмотрите не подходит ли лучше Grid вместо StackPanel.
    4 октября 2011 г. 19:54
  • спасибо за ссылки.

    а решение проблемы все-таки нашлось.

    Как мне посоветовали на англоязычном форуме:

    I don't think setting the StackPanel's HorizontalAlignment="Stretch" alone is enough to make the ListBoxItem full width. The problem is that the ListBox has a property HorizontalContentAlignment that defaults to Left, and you have to change this as well.

    I haven't been able to make it work by setting HorizontalContentAlignment directly in the ListBox definition, but it works if you set it by creating a style.
        <phone:PhoneApplicationPage.Resources> 
     
            <Style x:Key="ListBoxItemStretchContentStyle" TargetType="ListBoxItem"> 
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
            </Style> 
     
        </phone:PhoneApplicationPage.Resources> 
    In the ListBox, apply it to the ItemContainerStyle property.

     <ListBox  ItemContainerStyle="{StaticResource ListBoxItemStretchContentStyle}" ... 

    Этого достаточно для выравнивания самого контрола.
    Плюс, у меня в приведенном примере после всех экспериментов остался мусор и нужно stretch'ить CustomCintrol, иначе сам контрол будет выровнен, а текст внутри него - нет


    • Помечено в качестве ответа ealexash 5 октября 2011 г. 7:41
    • Изменено ealexash 5 октября 2011 г. 8:00
    5 октября 2011 г. 7:32
  • Спасибо, что написали решение и не бросили топик без ответа.


    Для связи [mail]
    5 октября 2011 г. 9:34