2015-07-20 99 views
0

我正在試圖製作一個Windows Phone頁面,其中有兩列,其中的列填充其所有空間以製作類似於Windows Phone菜單的矩形按鈕。令人驚訝的是,這比預期更棘手。我有佈局工作,然而,2列,但是,他們是小長方形,不填補他們的寬度或高度。Windows Phone 8.1 ListView列寬

我不想使用任何「寬度= 250」或其他。我純粹對敏感佈局解決方案感興趣。我目前的代碼如下。我已經在這裏約2天了...

<ListView 
     Grid.Row="1" 
     ItemsSource="{Binding Locations}" 
     HorizontalAlignment="Stretch" 
     HorizontalContentAlignment="Stretch" 
     VerticalContentAlignment="Stretch" 
     Margin="12"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
        <Button 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Margin="12" 
        BorderThickness="0"> 
         <Button.Template> 
          <ControlTemplate> 
           <StackPanel Background="{ThemeResource PhoneAccentBrush}"> 
            <Image /> 
            <TextBlock 
            TextAlignment="Center" 
            Text="{Binding Name}" /> 
           </StackPanel> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 
       </StackPanel> 

      </DataTemplate> 
     </ListView.ItemTemplate> 

     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapGrid Orientation="Horizontal" 
          MaximumRowsOrColumns="2" 
          HorizontalAlignment="Center" 
          VerticalChildrenAlignment="Stretch" 
          HorizontalChildrenAlignment="Stretch" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 

     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
       <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
      </Style> 
     </ListView.ItemContainerStyle> 
    </ListView> 

下面是它目前的樣子的截圖。正如你所看到的,按鈕具有實際上並不由我給出一個巨大的保證金......

http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b

回答

0

正如你所說的,它看起來像你一樣在你的圖片兩列。我還從您的標記中看到,您的列表中有12像素邊距,按鈕上有12像素邊距。這意味着你將在所有UI元素之間至少有24個像素的邊距。看看圖片,我發現UI元素之間接近60像素。我們應該進一步分解,看看額外的大小來自哪裏。

出於調試的目的,您可以爲您的ListView添加一個臨時背景顏色,併爲您的DataTemplate項目的StackPanel添加不同的背景顏色。然後拍攝一張新的截圖,看看哪些元素正在消耗所有的空間。我敢打賭這是ListViewItem。您可能需要修改ItemContainerStyle以刪除佔用空間的任何內置的不可見UI元素。

+0

你在這裏。 ListView背景是白色,而StackPanel背景是紅色。 Button是PhoneAccentColor,它是藍色的:http://gyazo.com/83455afd42b8b971ea3cd5c2336f6f55 – AllFallD0wn