Hey where can I find a sample of a Material Design TabControl without dragablz? All samples are with dragablz... Like the picture below.
You can use MaterialDesignTabControl provided with MaterialDesignExtensions.
as #fruggiero said MaterialDesignInXamlToolkit doesn't have any styling for tabcontrol... But here you can achieve the same tabcontrol like functionality with the look you want,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:ColorZone Mode="PrimaryMid">
<StackPanel Orientation="Horizontal" Margin="2">
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab1" Margin="4" IsChecked="True" Content="TAB 1"/>
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab2" Margin="4" Content="TAB 2"/>
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab3" Margin="4" Content="TAB 3"/>
</StackPanel>
</materialDesign:ColorZone>
<Border Grid.Row="1" BorderThickness="1 0 1 1" BorderBrush="{DynamicResource PrimaryHueMidBrush}" Padding="16">
<Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab1, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 1 content" FontSize="16" FontWeight="Medium"/>
</Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab2, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 2 content" FontSize="16" FontWeight="Medium"/>
</Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab3, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 3 content" FontSize="16" FontWeight="Medium"/>
</Grid>
</Grid>
</Border>
</Grid>
The MaterialDesignInXamlToolkit actually does not provide styling for the tabcontrol.
So, you can only use the dragablz tabcontrol and configure it to your need.
Related
I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>
I have a page with 2 columns
Each column has controls contained in stackpanels
The stackpanel is contained in a boarder.
border
stackpanel
.....
gridview
/stackpanel
/boarder
I want the boarder to fill the vertical height without setting the minheight to a pixel value.
Meaning I do not want the boarder to grow and shrink with the gridview, it should stay the same size, filling the colunm and respecting its margins.
<StackPanel x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<TextBlock FontWeight="Bold" Text="Tags" />
<Border BorderBrush="{StaticResource DGreen}"
MinHeight="500"
BorderThickness="2"
Padding="10">
<StackPanel >
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</StackPanel>
Change your First StackPanel to Grid. so that It can fill the complete available space. TextBox will go to first Row which is set as Auto and Second Border should go to Second Row which is set as *.
Below is a mockup from your example.
<Grid x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Text="Tags" Grid.Row="0" />
<Border BorderBrush="{StaticResource DGreen}" Grid.Row="1"
MinHeight="500" BorderThickness="2" Padding="10">
<StackPanel>
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</Grid>
I have a working GridView with a grouped items.
<GridView x:Name="ItemsGridView"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None" ItemClick="ItemsGridView_ItemClick" IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="title" Text="{Binding Name}" TextWrapping="NoWrap" Grid.ColumnSpan="1" Grid.Column="0" Padding="5,0,0,0" HorizontalAlignment="Left"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Width="130" Background="{StaticResource CommonBlueBackground}" >
<TextBlock TextWrapping="Wrap" Text="{Binding Key}" Style="{StaticResource GroupHeader}" Margin="0"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
Each group looks like this.
But I want it to look like this.
How do I style each group to have a line on the left hand side as pictured?
The groups in a GridView aren't actual controls, but rather a collection of item containers and header controls laid out in the ItemsPanel as you can see below.
The easiest solution would be to put a line on the left side of each item through updates to ItemContainerStyle.
Following code I had. I am using a Listbox using binding. Below the list box I have a button for submit. Able to scroll Listbox items only unable to scroll the button. Button is available at the bottom of the screen(not List). I want this button at the bottom of the Listbox?.
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="780" MaxHeight="1800" VerticalAlignment="Top">
<ScrollViewer.Content>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="formDetails" ItemsSource="{Binding}" Grid.Row="0" Height="780" MaxHeight="1800">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Click="Button_Click" Content="Submit"/>
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
Try this for button at the bottom of the Listbox:
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Click="Button_Click" Content="Submit"></Button>
</StackPanel>
</ScrollViewer>
for button at the bottom of the page
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question" Text="{Binding Q}"></TextBlock>
<TextBox Name="TxTAnswer" Text="{Binding A}"></TextBox>
<CheckBox Name="BoolVal" IsChecked="{Binding Val}"></CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<Button Click="Button_Click" Content="Submit" Grid.Row="1"></Button>
</Grid>
A few things:
You have defined your button as being in Grid.Row="1" which doesn't exist. You need to add a second row otherwise it will just appear in the same row as the ListBox.
Your entire page is within a ScrollViewer, is that really what you want? If you want the Button outside of the scrollviewer then just wrap the ListBox within the ScrollViewer, but that would be kind of pointless because a ListBox has its own ScrollViewer built in.
I have a listbox template showing an image and three textboxes. You will see how are they distributed in the code below. My problem is that some items won't have an image and I want the text to fill the whole row in that case.
I've tried not to use a grid, to use a canvas, but I don't know why, when using a canvas inside a listbox, nothing is shown. I don't know if this is easy to accomplish. Here's the code:
<ListBox Grid.Column="0" Grid.Row="1" Background="White" HorizontalAlignment="Stretch" Name="itemList" VerticalContentAlignment="Stretch" SelectionChanged="listBoxSetmana_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="480">
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="17" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="3" Grid.Column="0" Grid.Row="0" BorderThickness="1" BorderBrush="#FFFF003F" Padding="1">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="listImage" Width="36" Height="36" Source="{Binding thumbnail}" />
</Border>
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="0" Name="title" Foreground="Black" Text="{Binding title}" FontWeight="Bold" FontSize="20" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="1" Name="published" Foreground="Black" Text="{Binding published}" FontSize="13" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="2" Name="subtitle" Foreground="Black" Text="{Binding subtitle}" FontSize="16" TextWrapping="Wrap" />
<TextBlock Visibility="Collapsed" Text="{Binding id}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you!
There are several ways to bind this together.
One way is:
add some Padding to the Border
bind the Visibility of the Border to the thumbnail Property using an appropriate ValueConverter
change the width of Column 0 from "60" to "Auto" - then it will disappear when the image is Collapsed.