2017-10-05 66 views
0

我想顯示一些東西,比如評分板,團隊名稱在正方形的頂部25%,得分佔75%(根據字體比例)。我還希望這些控件在窗口被調整大小時增長/縮小。WPF ViewBox裏面的StackPanel

爲此,我創建了一個網格並將其分爲*3*行。我已將一個TextBlock添加到頂部行,另一個TextBlock跨底部4行。然後我將每個TextBox包裝在ViewBox中

這會導致應用程序進入「中斷模式」。

這說明問題:

<Window x:Class="WpfRandoms.MainWindow" 
     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" 
     xmlns:local="clr-namespace:WpfRandoms" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="3*"/> 
     </Grid.RowDefinitions> 

     <ListView ItemsSource="{Binding Teams}" HorizontalAlignment="Center" Grid.Row="0" BorderBrush="{x:Null}" Background="{x:Null}"> 
      <ListView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ListView.ItemsPanel> 
      <ListView.ItemContainerStyle> 
       <Style TargetType="{x:Type ListViewItem}"> 
        <Setter Property="Background" Value="Transparent" /> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type ListViewItem}"> 
           <ContentPresenter /> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </ListView.ItemContainerStyle> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <Border Margin="10" Padding="10" CornerRadius="5" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*" /> 
           <RowDefinition Height="3*" /> 
          </Grid.RowDefinitions> 
          <Viewbox Grid.Row="0"> 
           <TextBlock Text="{Binding Name}" TextAlignment="Center" /> 
          </Viewbox> 
          <Viewbox Grid.Row="1"> 
           <TextBlock Text="{Binding Score}" FontSize="40" TextAlignment="Center" /> 
          </Viewbox> 
         </Grid> 
        </Border> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </Grid> 
</Window> 

隨着後臺代碼:

using System.Collections.Generic; 
using System.Windows; 

namespace WpfRandoms 
{ 
    public partial class MainWindow : Window 
    { 
     public class Team 
     { 
      public string Name { get; set; } 
      public int Score { get; set; } 
     } 

     public IList<Team> Teams { get; private set; } 

     public MainWindow() 
     { 
      InitializeComponent(); 

      Teams = new List<Team>(); 
      Teams.Add(new Team() { Name = "Team A", Score = 78 }); 
      Teams.Add(new Team() { Name = "Team B", Score = 1 }); 
      Teams.Add(new Team() { Name = "Team C", Score = 101 }); 

      DataContext = this; 
     } 
    } 
} 

這似乎是由StackPanel中作爲一個ListView(沒有這個StackPanel的一切ItemsPanelTemplate將造成工作正常,但佈局不符合要求)。但是,我不知道另一種使ListView水平的方法,所以我被困在StackPanel中。

經過一番嘗試和閱讀關於ViewBox如何工作,以及如何StackPanels的行爲我到達了一些解決方案(可能不是最好的)。
我將ListView封裝在邊框中,然後將ListView的DataTemplate中邊框的高度綁定到外邊框的高度。
因爲這有一個小的限制 - 主要是上/下邊距導致ListView的元素被修剪。爲了避免這種修剪,我在DataTemplate中的邊框中添加了填充,然後在其中添加了一個具有背景的小邊框。
我還必須隱藏ListView的垂直滾動條。
以下是我有:

<Window x:Class="WpfRandoms.MainWindow" 
     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" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="3*"/> 
     </Grid.RowDefinitions> 

     <Border x:Name="MyBorder" Margin="10" Grid.Row="0"> 
      <ListView ItemsSource="{Binding Teams}" HorizontalAlignment="Center" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Hidden"> 
       <ListView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal"/> 
        </ItemsPanelTemplate> 
       </ListView.ItemsPanel> 
       <ListView.ItemContainerStyle> 
        <Style TargetType="{x:Type ListViewItem}"> 
         <Setter Property="Background" Value="Transparent" /> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type ListViewItem}"> 
            <ContentPresenter /> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </ListView.ItemContainerStyle> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <Border Margin="10, 0" Padding="10" Height="{Binding ActualHeight, ElementName=MyBorder}" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"> 
          <Border Background="AliceBlue" CornerRadius="5"> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*" /> 
             <RowDefinition Height="3*" /> 
            </Grid.RowDefinitions> 
            <Viewbox Grid.Row="0"> 
             <TextBlock Text="{Binding Name}" TextAlignment="Center"/> 
            </Viewbox> 
            <Viewbox Grid.Row="1"> 
             <TextBlock Text="{Binding Score}" FontSize="40" TextAlignment="Center"/> 
            </Viewbox> 
           </Grid> 
          </Border> 
         </Border> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
     </Border> 
    </Grid> 
</Window> 

如果有一個更好的解決方案,我將不勝感激:)

回答

0

我認爲你可能有你所引用的邊境控制轉換器問題。

我測試了XAML,沒有綁定,視圖框按預期工作。

<Border Margin="10" Padding="10" CornerRadius="5" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"> 
     <Viewbox> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="Team Name" TextAlignment="Center" Grid.Row="0" /> 
       <TextBlock Text="100" FontSize="100" TextAlignment="Center" Grid.Row="1" Grid.RowSpan="3"/> 
      </Grid> 
     </Viewbox> 
    </Border> 

希望這有助於!

+0

我也一樣(刪除綁定),這仍進入休息模式。如果它在ListView.ItemTemplate.DataTemplate中,它會有所作爲嗎? (這就是現在的位置,因爲我有一個團隊名單) –

+0

你可以發佈你所有的XAML嗎? – joshwl2003

1

我不知道我是否完全理解你的問題。如果您希望保持名稱和分數之間的比例相同,則可以使用「*」作爲名稱(25%)和「3 *」作爲分數(75%)。您也可以將每個TextBlock放在一個ViewBox中,而不是整個東西。爲了簡單起見,我用硬編碼的字符串替換了轉換器和綁定。

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid> 
    <Border Margin="10" Padding="10" CornerRadius="5" Background="Coral"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="3*" /> 
      </Grid.RowDefinitions> 
      <Viewbox Grid.Row="0"> 
       <TextBlock Text="Home" TextAlignment="Center" /> 
      </Viewbox> 
      <Viewbox Grid.Row="1" > 
       <TextBlock Grid.Row="1" Text="25" TextAlignment="Center" /> 
      </Viewbox> 
     </Grid> 
    </Border> 
</Grid> 

+0

再次,當我將TextBoxes包裝到ViewBox中(與您的代碼相同)時,一旦顯示此視圖,我就會在VisualStudio中看到「應用程序處於中斷模式」消息。 –