[英]Overlapping rotated Textblock inside fixed width Grid
我有代表標題的UserControl。 標頭文字可能會很長,因此旋轉可以解決問題。 每個列應為60 DPI,但是一旦文本用完超過60個,該文本將不再可見。 Grid是適合使用的類嗎?
長話短說,下面是我嘗試實現的目標(第一張圖片)和我擁有的目標(第二個示例)的示例。
以下是第二張圖片的xaml:
<UserControl>
<Grid Height="Auto">
<Grid.Resources>
<Style x:Key="StyleGrid" TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="RenderTransformOrigin" Value="0,0.5" />
<!-- <Setter Property="LayoutTransform"> -->
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="330" />
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="492" />
</Grid.ColumnDefinitions>
<!-- Header -->
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
FontSize="14"
FontWeight="Bold"
Text="Date 14.08.2014" />
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="1,0,0,0"
FontSize="18"
Text="This is the Title" />
<Grid Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid}">
<TextBlock Text="This is a long colum titel" />
</Grid>
<Grid Grid.Column="1"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid}">
<TextBlock FontSize="11" Text="Bla Bla 12" />
</Grid>
<Grid Grid.Column="2"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid}">
<TextBlock Text="Some more Text" />
</Grid>
<Grid Grid.Column="3"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid}">
<TextBlock Text="Short Text" />
</Grid>
</Grid>
</Grid>
通常,當您希望子控件能夠顯示在父面板的邊界之外時,可以使用“畫布”作為面板。
<Grid VerticalAlignment="Center">
<Grid.Resources>
<Style x:Key="StyleGrid2" TargetType="Canvas">
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="RenderTransformOrigin" Value="0,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="330" />
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="492" />
</Grid.ColumnDefinitions>
<!-- Header -->
<TextBlock Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
FontSize="14"
FontWeight="Bold"
Text="Date 14.08.2014" />
<TextBlock Grid.Row="1"
Grid.Column="0"
Margin="1,0,0,0"
FontSize="18"
Text="This is the Title" />
<Grid
Grid.Row="0"
Grid.RowSpan="2"
ShowGridLines="True"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<Canvas Grid.Column="0"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid2}">
<TextBlock Text="This is a long colum titel" />
</Canvas>
<Canvas Grid.Column="1"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid2}">
<TextBlock FontSize="11" Text="Bla Bla 12" />
</Canvas>
<Canvas Grid.Column="2"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid2}">
<TextBlock Text="Some more Text" />
</Canvas>
<Canvas Grid.Column="3"
HorizontalAlignment="Left"
Style="{StaticResource StyleGrid2}">
<TextBlock Text="Short Text" />
</Canvas>
</Grid>
</Grid>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.