Windows Phone 7中Expanderview项目的水平对齐

时间:2012-07-16 11:46:53

标签: windows-phone

我想在水平布局而不是垂直布局中对齐ExpanderView的内容或项目。 ExpanderHeader是动态设置的,其内容也是动态添加的。 app.xaml中的xaml部分和CustomeItemTemplate如下所示

    <toolkit:ExpanderView 
         Width="470" 
         Header="{Binding TaskName, Mode=TwoWay}"
          x:Name="taskNameExpander"
          Margin="5,10,5,10"
          Foreground="#FF677389" FontSize="24"   VerticalAlignment="Top"
          HorizontalAlignment="Left"
          ItemsSource="{Binding dateTime}" 
          ItemTemplate="{StaticResource CustomItemTemplate}"
          HorizontalContentAlignment="Left">
   </toolkit:ExpanderView>



<DataTemplate x:Key="CustomItemTemplate">

       <StackPanel Orientation="Horizontal" Height="60" >
            <TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"  
            TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
            <TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
        </StackPanel>


  </DataTemplate>

我仍然将内容垂直对齐。有人能指出我在这里做错了吗?


这是您要求的示例代码

         <Border BorderBrush="White" BorderThickness="1" Margin="5">
                            <ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
                            <toolkit:ExpanderView 
                                Width="1600" 
                                Header="{Binding TaskName, Mode=TwoWay}"
                                x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
                                ItemsSource="{Binding dateTime}" 
                                ItemTemplate="{StaticResource CustomItemTemplate}"
                                ScrollViewer.HorizontalScrollBarVisibility="Visible"
                                HorizontalContentAlignment="Left">
                                <toolkit:ExpanderView.ItemsPanel>
                                    <ItemsPanelTemplate >
                                        <StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>

                                    </ItemsPanelTemplate>
                                </toolkit:ExpanderView.ItemsPanel>

                            </toolkit:ExpanderView>
                            </ScrollViewer>


                        </Border>

我的app.xaml的CustomItemTemplate定义如下

  <DataTemplate x:Key="CustomItemTemplate">
        <StackPanel Orientation="Vertical" Height="100" >
            <TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
            <TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
            <TextBox.InputScope>

                <InputScope >
                    <InputScopeName NameValue="Number"></InputScopeName>

                </InputScope>

            </TextBox.InputScope>
            </TextBox>
        </StackPanel>
    </DataTemplate>

我想只水平滚动ExpanderView项目。它现在滚动但是整个ExpanderView都在滚动,包括它的标题。标题必须完整,只有项目必须滚动。我怎么能实现它?

1 个答案:

答案 0 :(得分:1)

您应该为ExpanderView控件设置ItemsPanel。

<toolkit:ExpanderView 
                     Width="470" Height="100"
                      x:Name="taskNameExpander"
                      Margin="5,10,5,10"
                      FontSize="24" Background="White"
                      HorizontalAlignment="Left"
                      ItemsSource="1 2 3 4" 
                      ItemTemplate="{StaticResource CustomItemTemplate}"
                      HorizontalContentAlignment="Left">
                    <toolkit:ExpanderView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </toolkit:ExpanderView.ItemsPanel>
            </toolkit:ExpanderView>