How to create expandable(dropdown) table in xaml? - c#

I am working on a project which displays a table. I am using a grid to present the table. Now, I want to add "+" button next to each row. This "+" button click will display a subtable under that row. This is a part of code without that feature implemented:
<Grid Name="ContentName" Grid.Row="1" Background="#FFFBFBFB" Margin="10,10,10,10" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<Grid.Effect>
<DropShadowEffect BlurRadius="20" Color="#FF858585" RenderingBias="Quality" ShadowDepth="1"/>
</Grid.Effect>
<Grid Name ="Tables" Margin="30">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"></ColumnDefinition>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,1" />
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
Expand each section to answer <LineBreak/>
each Risk Attribute Statement <LineBreak/>
[i.e. activity, service or product]
</TextBlock>
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="0,1,1,1" />
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
Category Inherent <LineBreak/>
Risk
</TextBlock>
<Border Grid.Row="0" Grid.Column="2" Background="Coral"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
Select <LineBreak/>
Risk <LineBreak/>
Level
</TextBlock>
<Border Grid.Row="0" Grid.Column="3" Background="#FFDCE6F1" />
<TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center">
Least(1)
</TextBlock>
<Border Grid.Row="0" Grid.Column="4" Background="#FFB8CCE4" />
<TextBlock Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center">
Minimal(2)
</TextBlock>
<Border Grid.Row="0" Grid.Column="5" Background="#FF95B3D7" />
<TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center">
Moderate(3)
</TextBlock>
<Border Grid.Row="0" Grid.Column="6" Background="#FF366092" />
<TextBlock Grid.Row="0" Grid.Column="6" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
Significant(4)
</TextBlock>
<Border Grid.Row="0" Grid.Column="7" Background="#FF244062" />
<TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">
Most(5)
</TextBlock>
<Border Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 1:
Technologies and <LineBreak/>
Connection Types
</TextBlock>
<Border Grid.Row="2" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 2:
Delivery Channels
</TextBlock>
<Border Grid.Row="3" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin ="10,0,0,0">
Category 3: <LineBreak/>
Online/Mobile Products <LineBreak/>
and Technology Services
</TextBlock>
<Border Grid.Row="4" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 4: <LineBreak/>
Organizational Characteristics
</TextBlock>
<Border Grid.Row="5" Grid.Column="0" BorderBrush="Black" BorderThickness="1,0,1,1" />
<TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0">
Category 5: External Threats
</TextBlock>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="1" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="2" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="3" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="4" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="5" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="6" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="1" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="2" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="3" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="4" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Border Grid.Row="5" Grid.Column="7" BorderBrush="Black" BorderThickness="0,0,1,1" />
<Expander Grid.Row="6" Grid.Column="0" Header="More Options">
<StackPanel Margin="10,4,0,0">
<ScrollBar Orientation="Vertical"
Minimum="1" Maximum="100"
Value="10"
/>
<CheckBox Margin="4" Content="Option 1" />
<CheckBox Margin="4" Content="Option 2" />
<CheckBox Margin="4" Content="Option 3" />
</StackPanel>
</Expander>
</Grid>
</Grid>
The output is:
Screenshot
How can I implement this feature? Is there a preferable way to display a table?

Related

How to align the textblocks in listview of windows phone 8.1

!
I need to align the textblocks(PhoneTxt, CreateddateTxt ) which is present in listview.
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Margin="5,0,0,0" Grid.Row="1" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="0,0,35,0" Grid.Row="2" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
#Schuere There is an big gap between them..After appplying your code
I need to display .(i.e in output)Print them as together each other in a same row with some space..
# fillobotto I need to display those textblocks together with one or two spaces in between them
Try this
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Margin="5,0,0,0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Text=">" FontSize="28" Margin="5,0,0,0" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal">
<TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Orientation="Horizontal" was missing
create some extra columndefinitions:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitions Width="Auto"/>
<ColumnDefinitions Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" Grid.Column="0" ColumnSpan x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Margin="5,0,0,0" Grid.Row="1" Grid.Column="0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="0,0,35,0" Grid.Row="1" Grid.Column="1" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</Grid>
This should change the outcome, the CreateddateTxt should be right next to PhoneTxt
I don't understand perfectly which TextBlock you want to align, but you shoud use a StackPanel control and set its Orientation property to Horizontal.
<ListBox Background="Transparent" HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1" Margin="6" VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="350" >
<Border Margin="5" BorderBrush="White" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
<TextBlock Grid.Row="0" Text=">" FontSize="28" HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
<StackPanel Grid.Row="1">
<TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}" />
<TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
See the reference: https://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.orientation%28v=vs.110%29.aspx

Binding not working on GroupBox.HeaderTemplate

I created a custom header for my GroupBox like the following image:
I want also to set a Binding on the Backgroud of this header, so I wrote the following code:
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
After execution, I the GroupBox's Background is colord in the right way, but not the header !
Is anyone able to explain to me why it's not working well ?
you can use like that ;
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.Header>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</GroupBox.Header>
<!--<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding Path=HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>-->
</GroupBox>
Solution Found !
I had to make an internal binding in the Xaml, between the backgroud of the GroupBox and it's header. Like the followiing code:
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HubColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=Background}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
The result is:
You can use this binding without element name
<GroupBox Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
Background="{Binding HColor}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20" Background="{Binding Background, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>
</GroupBox>
You can rely on your VM data instead of control properties
<GroupBox Name="HubGroupBox"
Width="130"
Height="80"
BorderBrush="Black"
Margin="5"
Grid.Row="0"
DataSource="{Binding VMObject}">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Border Canvas.ZIndex="2"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="3"
HorizontalAlignment="Stretch"
Width="70"
Margin="-2,0,-3,-1"
Height="20"
Background="{Binding ElementName=HubGroupBox, Path=DataSource.HColor}">
<TextBlock Text="Hubs"
Foreground="Black"
FontWeight="DemiBold"
HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</GroupBox.HeaderTemplate>

Scrollviewer visibility after debugging

I have a WPF Application. I added a scrollviewer to a window. However I can see the scrollviewer during the design. When I debug the project then the scrollviewer does not seem...
There is the code
</local:WorkControl.DataContext>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<Grid Name="mainGrid" VerticalAlignment="Top">
<Grid.Background>
<ImageBrush Stretch="Fill" TileMode="FlipXY" Viewport="0,0,1479,437" ViewportUnits="Absolute" />
</Grid.Background>
<DockPanel HorizontalAlignment="Stretch" Margin="1,1,1,1" Name="dockPanel1" VerticalAlignment="Top" Width="Auto">
<Grid Name="grid1" Width="Auto" Margin="0" VerticalAlignment="Top" DockPanel.Dock="Top" OpacityMask="Black" ShowGridLines="False" OverridesDefaultStyle="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="310" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="123" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="3" BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Left" Margin="2" Name="borAdrTopR" VerticalAlignment="Top" CornerRadius="5"
AllowDrop="False">
<Canvas Width="834" Height="40" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Name="panelTop" ContextMenuOpening="panelTop_ContextMenuOpening">
<TextBlock Name="txAdrID" Canvas.Left="11" Canvas.Top="11" Height="20" Text="AdrID:" Width="44" Foreground="Silver" FontWeight="Bold" />
<TextBox Text="{Binding [AdrID]}" Height="20" HorizontalAlignment="Right" Margin="0,11,602,0" Name="tbAdrID" Width="86" VerticalAlignment="Top" FontWeight="Bold"
VerticalContentAlignment="Top" Foreground="Silver" Canvas.Left="54" Canvas.Top="-1" Padding="1" BorderThickness="0" IsReadOnly="True" Background="{x:Null}" />
<TextBlock Canvas.Left="488" Canvas.Top="11" Height="20" Text="Adresspool:" Width="70" TextAlignment="Right" />
<CheckBox Canvas.Left="570" Canvas.Top="11" Content="MSS" Height="16" Name="chkMSSPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="620" Canvas.Top="11" Content="GMM" Height="16" Name="chkGMMPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="675" Canvas.Top="11" Content="MZ" Height="16" Name="chkMZPool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" IsEnabled="False" />
<CheckBox Canvas.Left="728" Canvas.Top="11" Content="Sage" Height="16" Name="chkSagePool" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<CheckBox Canvas.Left="780" Canvas.Top="11" Content="Web" Height="16" Name="chkMyMalikPool" IsEnabled="False" Checked="chkPool_Checked" Unchecked="chkPool_Checked" />
<TextBox Background="{x:Null}" BorderThickness="0" Canvas.Left="367" Canvas.Top="9" FontWeight="Bold" Foreground="Red" Height="21" IsReadOnly="True" Name="tbSecInfo"
Padding="1" Text="" VerticalContentAlignment="Top" Width="101" />
<Image Canvas.Left="268" Canvas.Top="11" Height="16" Name="imgCRMstatus" Stretch="None" Width="96" MouseLeftButtonUp="imgCRMstatus_MouseClick"
MouseRightButtonUp="imgCRMstatus_MouseClick" />
<Label Canvas.Left="257" Canvas.Top="17" Height="11" Name="lbCRMStatus" Width="9" IsEnabled="False" />
<Image Canvas.Left="466" Canvas.Top="7" Height="24" Name="imgSec" Stretch="None" Width="24" MouseRightButtonUp="imgSec_MouseClick" MouseLeftButtonUp="imgSec_MouseClick"
Visibility="Hidden" />
</Canvas>
</Border>
<Border Grid.Row="1" BorderBrush="Silver" BorderThickness="1" HorizontalAlignment="Left" Name="borAddress" VerticalAlignment="Top" CornerRadius="5" Background="White"
AllowDrop="False">
<FlowDocumentScrollViewer HorizontalAlignment="Left" Name="fdocview" VerticalAlignment="Top" Height="Auto" VerticalScrollBarVisibility="Auto" Background="#FFFFFFF9"
Margin="2" HorizontalContentAlignment="Left" Padding="0" MinHeight="118">
<FlowDocument TextAlignment="Left" FontSize="12" PagePadding="5">
<FlowDocument.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="FontSize" Value="13" />
<Setter Property="Foreground" Value="DarkBlue" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
</FlowDocument.Resources>
<Paragraph>ViewControl...mmm</Paragraph>
</FlowDocument>
</FlowDocumentScrollViewer>
</Border>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borAdrInfoLeft" CornerRadius="6" AllowDrop="False">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="73" />
<ColumnDefinition />
<ColumnDefinition Width="35" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<local:ComboBoxCW Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" x:Name="cbAdrTypeID" CWListName="Adresstypen" Background="#FFC8D2E8"
SelectedID="{Binding Path=[AdrTypeID]}" SelectionChanged="cwAdrType_SelectionChanged" Margin="0,0,0,3" />
<local:ComboBoxCW Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" x:Name="cbGruppenID" SelectedID="{Binding [GruppenID]}" CWListName="Gruppen" Background="#FFC8D2E8"
CWListArt="withall" CWListFilter="M" Margin="0,0,0,3" />
<TextBlock Grid.Column="3" Grid.Row="0" Name="txtBedeutung" Text="$$" Width="22" TextAlignment="Center" VerticalAlignment="Center" />
<TextBox Grid.Column="1" Grid.Row="2" Name="tbKundenNr" Canvas.Left="83" Text="{Binding [KundenNr]}" BorderBrush="#96000000" MaxLength="30" Margin="0,0,0,3" />
<TextBox Grid.Column="3" Grid.Row="2" Name="tbCRA" Text="{Binding [CRA]}" BorderBrush="#96000000" IsReadOnly="True" Margin="0,0,0,3" />
<local:ComboBoxCW Grid.Column="1" Grid.Row="3" x:Name="cwSprachID" SelectedID="{Binding [SprachID],Mode=TwoWay}" CWListName="Sprachen" CWListArt="withempty"
Margin="0,0,0,3" />
<ComboBox Grid.Column="3" Grid.Row="3" Name="cbBedeutung" Text="{Binding Path=[Bedeutung]}">
<ComboBoxItem Content=" " />
<ComboBoxItem Content="A" />
<ComboBoxItem Content="B" />
<ComboBoxItem Content="C" />
</ComboBox>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Adressart" />
<TextBlock Grid.Column="0" Grid.Row="1" Text="Gruppe" />
<TextBlock Grid.Column="0" Grid.Row="2" Text="Kundennr." />
<TextBlock Grid.Column="2" Grid.Row="2" Text="CRA" TextAlignment="Right" />
<TextBlock Grid.Column="0" Grid.Row="3" Text="Sprache" />
<TextBlock Grid.Column="2" Grid.Row="3" Text="Bed." TextAlignment="Right" />
</Grid>
</Border>
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borAdrInfoRight" CornerRadius="6" AllowDrop="False">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="73" />
<ColumnDefinition />
<ColumnDefinition Width="35" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<local:ComboBoxCW Grid.Row="0" Grid.Column="1" x:Name="cbAdrStatusID" SelectedID="{Binding [AdrStatusID]}" CWListName="Adressstati" Margin="0,0,0,3"
Background="#FFC8D2E8" />
<TextBox Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Name="tbMZunitID"
Text="{Binding [MZunitID],Mode=OneWay,Converter={StaticResource codetextfromid}, ConverterParameter=MZunits}" Margin="0,0,0,3" BorderBrush="#96000000"
IsReadOnly="True" />
<local:ComboBoxCW Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cbBetreuerID" Text="" Background="#FFC8D2E8" CWListName="Mitarbeiter" Margin="0,0,0,3"
SelectedID="{Binding Path=[BetreuerID]}" CWListArt="withall" />
<ListBox Grid.Row="2" Grid.Column="1" Name="listBetreuers" BorderBrush="#96000000" SelectionChanged="listBetreuers_SelectionChanged" Grid.ColumnSpan="3"
Grid.RowSpan="2" Margin="0,0,0,3" />
<Popup Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3" OpacityMask="#00000000" Name="popAdd" StaysOpen="False" PlacementTarget="{Binding ElementName=listBetreuers}"
Placement="Bottom" HorizontalOffset="-40" VerticalOffset="-20">
<ListBox Height="160" Width="270" HorizontalAlignment="Left" Name="listAdd" VerticalAlignment="Top" SelectionChanged="listAdd_SelectionChanged" />
</Popup>
<Button Grid.Row="3" Grid.Column="4" Content="-" Height="22" Width="22" Name="btnBetreuerDel" Click="btnBetreuerDel_Click" HorizontalAlignment="Right" />
<Button Grid.Row="2" Grid.Column="4" Content="+" Height="22" Width="22" Name="btnBetreuerAdd" Click="btnBetreuerAdd_Click" HorizontalAlignment="Right" />
<Button Grid.Row="1" Grid.Column="4" Content="H" Height="22" Width="22" Name="btnBetreuerHaupt" Click="btnBetreuerHaupt_Click" HorizontalAlignment="Right" />
<TextBlock Grid.Row="0" Grid.Column="0" Text="Status" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="Unit" TextAlignment="Right" Margin="2" />
<TextBlock Name="lbHauptbetrP" Visibility="Visible" Grid.Row="1" Grid.Column="0" Text="Hauptbetr." />
<TextBlock Name="lbHauptbetrF" Visibility="Hidden" Grid.Row="1" Grid.Column="0" Text="Account-Mgr." />
<TextBlock Grid.Row="2" Grid.Column="0" Text="weitere Betreuer" TextWrapping="Wrap" />
</Grid>
</Border>
<!-- ====TAB Firma start -->
<TabControl Grid.Row="2" Grid.ColumnSpan="3" Name="tabReg" Margin="0" SelectionChanged="tabReg_SelectionChanged" VerticalAlignment="Stretch" Padding="2,2">
<TabItem Header="Firma" Name="regFirma" local:HelpProvider.HelpParameter="AddressControl;Firma">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<!-- ====Firmen-Felder linke Seite -->
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Silver" BorderThickness="1" Padding="3" Name="borFeed0" CornerRadius="6" AllowDrop="False">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="38" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Firma" />
<Button Name="btnLinkFirma" Height="23" Width="23" ToolTip="Mit Firma verknüpfen..." Click="btnLinkFirma_Click" Grid.Column="0" Grid.Row="0"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,5,0">
<Button.Content>
<Image Source="Images/Verknuepfung_32.png" />
</Button.Content>
</Button>
<TextBox Name="tbFirma" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Margin="0,0,0,3" Text="{Binding Path=[Firma]}" BorderBrush="#96000000"
MouseDoubleClick="tbFirma_MouseDoubleClick" MaxLength="80" AcceptsReturn="True" />
<TextBox x:Name="tbFirmazusatz" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,0,3" Text="{Binding Path=[Firmazusatz]}" BorderBrush="#96000000"
MaxLength="50" />
There are more codes
Adding to Aghilas's answer
If you have set HorizontalScrollBarVisibility, VerticalScrollBarVisibility properties to 'Auto', try setting them to Visible.

Chess Board in Metro Style apps

I am just playing around with the Metro style apps. I wanted to create a simple chess board using the UniformGrid from Wpf but it seems like that it is not supported in Metro style apps. Are there any alternative ways in Metro Style apps to create a chess board?
Can't you just use an 8x8 Grid? Eight RowDefinitions and Eight ColumnDefinitions should get it.
Here's a very brute force method of doing this. As long as the grid's height and width make it square, the resultant items will be the appropriate proportions. You could also set the Height of each RowDefinition and the Width of each ColumnDefinition to the same arbitrary value and get it proportional.
For something like this, I might choose to add the controls in the codebehind, versus in the XAML, but that's a choice I leave up to you.
<Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400" >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Black" Grid.Row="0" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="1"/>
<Border Background="Black" Grid.Row="0" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="3"/>
<Border Background="Black" Grid.Row="0" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="5"/>
<Border Background="Black" Grid.Row="0" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="0" Grid.Column="7"/>
<Border Background="Black" Grid.Row="2" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="1"/>
<Border Background="Black" Grid.Row="2" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="3"/>
<Border Background="Black" Grid.Row="2" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="5"/>
<Border Background="Black" Grid.Row="2" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="2" Grid.Column="7"/>
<Border Background="Black" Grid.Row="4" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="1"/>
<Border Background="Black" Grid.Row="4" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="3"/>
<Border Background="Black" Grid.Row="4" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="5"/>
<Border Background="Black" Grid.Row="4" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="4" Grid.Column="7"/>
<Border Background="Black" Grid.Row="6" Grid.Column="0"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="1"/>
<Border Background="Black" Grid.Row="6" Grid.Column="2"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="3"/>
<Border Background="Black" Grid.Row="6" Grid.Column="4"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="5"/>
<Border Background="Black" Grid.Row="6" Grid.Column="6"/>
<Border Background="Ivory" Grid.Row="6" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="0"/>
<Border Background="Black" Grid.Row="3" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="2"/>
<Border Background="Black" Grid.Row="3" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="4"/>
<Border Background="Black" Grid.Row="3" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="3" Grid.Column="6"/>
<Border Background="Black" Grid.Row="3" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="0"/>
<Border Background="Black" Grid.Row="5" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="2"/>
<Border Background="Black" Grid.Row="5" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="4"/>
<Border Background="Black" Grid.Row="5" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="5" Grid.Column="6"/>
<Border Background="Black" Grid.Row="5" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="0"/>
<Border Background="Black" Grid.Row="7" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="2"/>
<Border Background="Black" Grid.Row="7" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="4"/>
<Border Background="Black" Grid.Row="7" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="7" Grid.Column="6"/>
<Border Background="Black" Grid.Row="7" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
<Border Background="Black" Grid.Row="1" Grid.Column="1"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
<Border Background="Black" Grid.Row="1" Grid.Column="3"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
<Border Background="Black" Grid.Row="1" Grid.Column="5"/>
<Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
<Border Background="Black" Grid.Row="1" Grid.Column="7"/>
</Grid>
If you plan on using databinding you can use a WrapGrid with the MaximumRowsOrColumns property set to 8. Then bind to a collection of 64 items that contain the state of the board.
WrapGrid API Reference
UniformGrid isn't necessary with ViewBox:
<Window
x:Class="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:ChessGUI"
mc:Ignorable="d"
Title="Chess GUI"
Height="640"
Width="640" Background="PaleGreen"
>
<Viewbox Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="16" >
<Grid Background="White" Width="256" Height="256">
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="1" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="1" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="1" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="3" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="3" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="5" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="5" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="7" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="7" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="9" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="9" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="11" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="11" Grid.Column="15" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="1" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="3" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="5" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="7" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="9" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="11" Fill="DarkGray" />
<Rectangle Grid.Row="13" Grid.Column="13" Fill="LightGray" />
<Rectangle Grid.Row="13" Grid.Column="15" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="1" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="3" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="5" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="7" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="9" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="11" Fill="LightGray" />
<Rectangle Grid.Row="15" Grid.Column="13" Fill="DarkGray" />
<Rectangle Grid.Row="15" Grid.Column="15" Fill="LightGray" />
</Grid>
</Viewbox>
</Window>

<view:Content ...> tags in XAML

I inherited some code where I've seen this construction, which I'm not used to, in several locations:
<view:Content x:Name="TimeFrame" Margin="220,50,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" >
<view:Content.ChildContent>
<view:TimeFrame />
</view:Content.ChildContent>
</view:Content>
Which I must admit seems rather nifty, and thus far works as I want it too. However, then there's this where instead of the <view:TimeFrame />-tag in the center there are a regular control-tags like so:
<view:Content x:Name="SignInControl" Margin="466,317,0,0" HorizontalAlignment="Left" Width="348" Height="344" VerticalAlignment="Top">
<view:Content.ChildContent>
<Grid>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#666666" Margin="1,0,-1,0" Opacity="0.57" >
<Border.Effect>
<BlurEffect/>
</Border.Effect>
</Border>
<Border CornerRadius="8,8,0,0" BorderThickness="1" Width="270" Height="300" Background="#FFF3F5F4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="100"/>
<RowDefinition Height="25"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="ChartWizz" FontFamily="Verdana" FontSize="10" Margin="0,3,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<ToggleButton Style="{StaticResource up_down}" Checked="ToggleButton_Checked" />
<Image Source="Pictures/logo_250.png" Margin="5" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<StackPanel Width="210" Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="Change User or" Margin="0,0,3,0" FontFamily="Verdana" FontSize="11" />
<Button Style="{StaticResource LinkButton}" Click="CreateNewAccLink_Click" Margin="2, 0, 0, 0">
<TextBlock Text="Create new account" FontFamily="Verdana" FontSize="11" Foreground="Black" TextDecorations="Underline"/>
</Button>
</StackPanel>
<StackPanel Grid.Row="3" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Username" FontFamily="Verdana" FontSize="10" Margin="0,0,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Row="4" Orientation="Vertical" HorizontalAlignment="Center" >
<TextBlock Text="Password" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<PasswordBox Width="210" Height="20" HorizontalAlignment="Left" />
</StackPanel>
<Grid Grid.Row="5" HorizontalAlignment="Left" >
<Button Style="{StaticResource LinkButton}" Click="ForgotPassLink_Click" Margin="2, 0, 0, 0" HorizontalAlignment="Left">
<TextBlock Text="Forgot your password?" Width="Auto" Foreground="Black" TextDecorations="Underline" FontFamily="Verdana" FontSize="10" Margin="27,5,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
</Button>
</Grid>
<StackPanel Grid.Row="7" Width="210" Margin="0,5,0,0" Orientation="Horizontal" HorizontalAlignment="Center" >
<CheckBox Content="Remember me" FontFamily="Verdana" FontSize="10" Margin="0,4,0,3" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Button Width="60" Content="Sign in" Height="23" Margin="55,0,0,0" VerticalAlignment="Center" Click="SiginBtn_Click" />
</StackPanel>
</Grid>
</Border>
</Grid>
</view:Content.ChildContent>
</view:Content>
When I attempted to give the controls here names so that I could access them in code I got the following error:
Cannot set Name attribute value 'txtBox_username' on element 'TextBox'. 'TextBox' is under the scope of element 'Content', which already had a name registered when it was defined in another scope.
I don't know if it's possible to access these members in some other way through the Content scope but if anyone would enlighten me I would be grateful. Either way I'd really like a link to a relevant MSDN page(or other resource) as I can't seem to figure out what to search for in order to learn more about type tags.
Thanks
This behaviour is caused by how UserControls are implemented, see this question for workarounds.

Categories