Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I tried to find some control templates or solutions for this problem on internet, but I didn’t find any “acceptable” solution for me. So I wrote it in my way and here is an example of my first (and last=)) attempt to do it:</p> <pre><code>&lt;Window x:Class="TabControlTemplate.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:TabControlTemplate" Title="Window1" Width="600" Height="400"&gt; &lt;Window.Background&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="1,1"&gt; &lt;GradientStop Color="#FF3164a5" Offset="1"/&gt; &lt;GradientStop Color="#FF8AAED4" Offset="0"/&gt; &lt;/LinearGradientBrush&gt; &lt;/Window.Background&gt; &lt;Window.Resources&gt; &lt;src:ContentToPathConverter x:Key="content2PathConverter"/&gt; &lt;src:ContentToMarginConverter x:Key="content2MarginConverter"/&gt; &lt;SolidColorBrush x:Key="BorderBrush" Color="#FFFFFFFF"/&gt; &lt;SolidColorBrush x:Key="HoverBrush" Color="#FFFF4500"/&gt; &lt;LinearGradientBrush x:Key="TabControlBackgroundBrush" EndPoint="0.5,0" StartPoint="0.5,1"&gt; &lt;GradientStop Color="#FFa9cde7" Offset="0"/&gt; &lt;GradientStop Color="#FFe7f4fc" Offset="0.3"/&gt; &lt;GradientStop Color="#FFf2fafd" Offset="0.85"/&gt; &lt;GradientStop Color="#FFe4f6fa" Offset="1"/&gt; &lt;/LinearGradientBrush&gt; &lt;LinearGradientBrush x:Key="TabItemPathBrush" StartPoint="0,0" EndPoint="0,1"&gt; &lt;GradientStop Color="#FF3164a5" Offset="0"/&gt; &lt;GradientStop Color="#FFe4f6fa" Offset="1"/&gt; &lt;/LinearGradientBrush&gt; &lt;!-- TabControl style --&gt; &lt;Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}"&gt; &lt;Setter Property="BorderThickness" Value="1"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="TabControl"&gt; &lt;Grid&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="*"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;Border Grid.Row="1" BorderThickness="2,0,2,2" Panel.ZIndex="2" CornerRadius="0,0,2,2" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource TabControlBackgroundBrush}"&gt; &lt;ContentPresenter ContentSource="SelectedContent"/&gt; &lt;/Border&gt; &lt;StackPanel Orientation="Horizontal" Grid.Row="0" Panel.ZIndex="1" IsItemsHost="true"/&gt; &lt;Rectangle Grid.Row="0" Height="2" VerticalAlignment="Bottom" Fill="{StaticResource BorderBrush}"/&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;!-- TabItem style --&gt; &lt;Style x:Key="{x:Type TabItem}" TargetType="{x:Type TabItem}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="True"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="TabItem"&gt; &lt;Grid x:Name="grd"&gt; &lt;Path x:Name="TabPath" StrokeThickness="2" Margin="{Binding ElementName=TabItemContent, Converter={StaticResource content2MarginConverter}}" Stroke="{StaticResource BorderBrush}" Fill="{StaticResource TabItemPathBrush}"&gt; &lt;Path.Data&gt; &lt;PathGeometry&gt; &lt;PathFigure IsClosed="False" StartPoint="1,0" Segments="{Binding ElementName=TabItemContent, Converter={StaticResource content2PathConverter}}"&gt; &lt;/PathFigure&gt; &lt;/PathGeometry&gt; &lt;/Path.Data&gt; &lt;Path.LayoutTransform&gt; &lt;ScaleTransform ScaleY="-1"/&gt; &lt;/Path.LayoutTransform&gt; &lt;/Path&gt; &lt;Rectangle x:Name="TabItemTopBorder" Height="2" Visibility="Visible" VerticalAlignment="Bottom" Fill="{StaticResource BorderBrush}" Margin="{Binding ElementName=TabItemContent, Converter={StaticResource content2MarginConverter}}" /&gt; &lt;ContentPresenter x:Name="TabItemContent" ContentSource="Header" Margin="10,2,10,2" VerticalAlignment="Center" TextElement.Foreground="#FF000000"/&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsMouseOver" Value="True" SourceName="grd"&gt; &lt;Setter Property="Stroke" Value="{StaticResource HoverBrush}" TargetName="TabPath"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="Selector.IsSelected" Value="True"&gt; &lt;Setter Property="Fill" TargetName="TabPath"&gt; &lt;Setter.Value&gt; &lt;SolidColorBrush Color="#FFe4f6fa"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="BitmapEffect"&gt; &lt;Setter.Value&gt; &lt;DropShadowBitmapEffect Direction="302" Opacity="0.4" ShadowDepth="2" Softness="0.5"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="Panel.ZIndex" Value="2"/&gt; &lt;Setter Property="Visibility" Value="Hidden" TargetName="TabItemTopBorder"/&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Window.Resources&gt; &lt;Grid Margin="20"&gt; &lt;TabControl Grid.Row="0" Grid.Column="1" Margin="5" TabStripPlacement="Top" Style="{StaticResource TabControlStyle}" FontSize="16"&gt; &lt;TabItem Header="MainTab"&gt; &lt;Border Margin="10"&gt; &lt;TextBlock Text="The quick brown fox jumps over the lazy dog."/&gt; &lt;/Border&gt; &lt;/TabItem&gt; &lt;TabItem Header="VeryVeryLongTab" /&gt; &lt;TabItem Header="Tab" /&gt; &lt;/TabControl&gt; &lt;/Grid&gt; </code></pre> <p></p> <pre><code>using System; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Media; namespace TabControlTemplate { public partial class Window1 { public Window1() { InitializeComponent(); } } public class ContentToMarginConverter: IValueConverter { #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return new Thickness(0, 0, -((ContentPresenter)value).ActualHeight, 0); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion } public class ContentToPathConverter: IValueConverter { #region IValueConverter Members public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { var ps = new PathSegmentCollection(4); ContentPresenter cp = (ContentPresenter)value; double h = cp.ActualHeight &gt; 10 ? 1.4 * cp.ActualHeight : 10; double w = cp.ActualWidth &gt; 10 ? 1.25 * cp.ActualWidth : 10; ps.Add(new LineSegment(new Point(1, 0.7 * h), true)); ps.Add(new BezierSegment(new Point(1, 0.9 * h), new Point(0.1 * h, h), new Point(0.3 * h, h), true)); ps.Add(new LineSegment(new Point(w, h), true)); ps.Add(new BezierSegment(new Point(w + 0.6 * h, h), new Point(w + h, 0), new Point(w + h * 1.3, 0), true)); return ps; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion } } </code></pre> <p>These two converters I wrote to adjust tab size to its content. Actually, I making Path object depending on content size. If you don’t need tabs with various widths, you can use some modified copy of this:</p> <pre><code>&lt;Style x:Key="tabPath" TargetType="{x:Type Path}"&gt; &lt;Setter Property="Stroke" Value="Black"/&gt; &lt;Setter Property="Data"&gt; &lt;Setter.Value&gt; &lt;PathGeometry Figures="M 0,0 L 0,14 C 0,18 2,20 6,20 L 60,20 C 70,20 80,0 84,0"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>screen:</p> <p><img src="https://i.stack.imgur.com/ClMla.png" alt="screenshot"></p> <p><a href="http://bitbucket.org/rooks/trapezoidtabs" rel="noreferrer">sample project(vs2010)</a></p>
    singulars
    1. This table or related slice is empty.
    1. POHow to create trapezoid tabs in WPF tab control
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USSpooky
    1. USrooks
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to create trapezoid tabs in WPF tab control
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO@rooks: Great example, thanks! It works at runtime for me but I have problems in the WPF designer in VS2010. The designer crashes with a NullReferenceException which seems to be caused by the `Path.Data` element in the XAML. When I comment out this element the designer is stable. Do you have any clue how this issue could be fixed?
      singulars
      1. PO
      1. USSlauma
    2. CO@rooks: In the meantime I've found a fix to get your example working also in the designer view of VS2010: see my answer in this thread.
      singulars
      1. PO
      1. USSlauma
    3. COWow, this exactly what I just spent the last hour or so trying to accomplish. Leave the designing for the designers I say! +1 and 100 more if I could.
      singulars
      1. PO
      1. USEd S.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload