I have a UserControl which contains a button CollapseConsoleBtn:
<UserControl //namespaces
<Grid
Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="0"
Margin="5,0,0,0"
Orientation="Horizontal">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Click="CollapseBtn_Click"
Content="▼"
FontSize="12">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Image
Height="25"
Margin="7,0,0,0"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Margin="2,0,0,0"
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
</UserControl>
My problem here is that I want to make the button smaller - for example with Height 20 and Width 20. I can change the width, but apparently, the height is fixed to be 25. Even if I set it to 15, it remains the same size.
Has anyone encountered this problem?
I think trouble is in <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}"> (you put Button and StackPanel there).
I tried to removed it, a bit played with margins and paddings, setted a size of button 16x16 (MinWidth & MinHeight properties) and get this result:
UserControl XAML:
<Grid Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="26" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button x:Name="CollapseButton"
Click="CollapseBtn_Click"
MinWidth="16"
MinHeight="16"
Margin="2,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Row="0"
Content="▼">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0"
Orientation="Horizontal">
<Image Height="25"
Visibility="Visible" />
<Label Margin="18,0,0,0"
Content="Console"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0,0,0,2"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
What you can do is:
Set the button's MinHeight instead of Height.
Make sure that the button's HorizontalAlignment and VerticalAlignment are set as their default value is Stretch.
Related
I developed a wpf-app with C# in Visual Studio 2017.
When deploying the software on the target devices (55" NEC Touchscreens, Resolution 1920x1080) the buttons I designed will disappear when the app launches, while the rest of the MainWindow stays in place. I set in <Window> tag Height="1080" Width="1920". When testing the software on my 1920x1080 screen on my desktop (22") the buttons were in place.
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="xyz" FontSize="12" Margin="0,59,0,58"/>
</Button>
I have four Buttons, all with just different positions.
This is the whole XAML:
<Window x:Class="Startup.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Prometheus" Height="1080" Width="1920"
WindowState="Maximized"
WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
>
<Window.Background>
<ImageBrush ImageSource="Resource/background_img.png"></ImageBrush>
</Window.Background>
<Grid Margin="12">
<Grid Margin="10,4,-10,361" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start" HorizontalAlignment="Right" Margin="0,10,0,0" VerticalAlignment="Top" Width="101" RenderTransformOrigin="-0.013,0.15" Name="GetEventsBtn" Click="GetEvents" Height="34" IsDefault="True" TabIndex="2" Visibility="Hidden" />
<TextBlock HorizontalAlignment="Left" Margin="76,68,0,0" TextWrapping="Wrap" Text="Hi" VerticalAlignment="Top" FontFamily="" Height="60" Width="613" Foreground="#FFE0D2D2" FontSize="48"/>
<TextBlock HorizontalAlignment="Left" Margin="76,133,0,0" TextWrapping="Wrap" Text="Please choose one option below to get started quickly." VerticalAlignment="Top" FontFamily="" Height="46" Width="499" Foreground="#FFE0D2D2" FontSize="20"/>
</Grid>
<Button Style="{StaticResource FlatButtonStyle}" Click="QuickGuide_Click" Name="QuickGuide" Background="#253135" Margin="375,531,1362,375">
<TextBlock Text="Quick Guide" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12" Margin="0,59,0,58"/>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="PlanAMeeting_Click" Name="PlanAMeeting" Margin="170,531,1576,375">
<TextBlock Grid.Row="1" Text="Plan a meeting" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"></TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="CreateAMeeting_Click" Name="CreateAMeeting" Margin="375,319,1362,587">
<TextBlock Grid.Row="1" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12"> Create a new <LineBreak></LineBreak> meeting for now</TextBlock>
</Button>
<Button Style="{StaticResource FlatButtonStyle}" Click="StartAMeeting_Click" Name="StartAMeeting" Margin="170,319,1576,587">
<TextBlock Grid.Row="1" TextWrapping="Wrap" TextAlignment="Center" Foreground="AntiqueWhite" VerticalAlignment="Center" FontFamily="" FontSize="12">Start a scheduled<LineBreak></LineBreak> meeting</TextBlock>
</Button>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,-306,39,306" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR1Z1" Foreground="White" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="Please wait while loading..."></TextBlock>
<TextBlock Name="GR1Z2" Foreground="White" Grid.Row="2"></TextBlock>
<TextBlock Name="GR1Z3" Foreground="White" Grid.Row="3"></TextBlock>
<TextBlock Name="GR1Z4" Foreground="White" Grid.Row="4"></TextBlock>
<TextBlock Name="GR1Z5" Foreground="White" Grid.Row="5"></TextBlock>
</Grid>
<Grid MaxHeight="200" MaxWidth="600" Margin="1147,96,39,306">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<TextBlock Name="GR2Z1" Grid.Row="1" Foreground="White" FontSize="16" FontWeight="Bold"></TextBlock>
<TextBlock Name="GR2Z2" Grid.Row="2" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z3" Grid.Row="3" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z4" Grid.Row="4" Foreground="White"></TextBlock>
<TextBlock Name="GR2Z5" Grid.Row="5" Foreground="White"></TextBlock>
</Grid>
</Grid>
and the style
<Style TargetType="Button" x:Key="FlatButtonStyle">
<Setter Property="Background" Value="#253135"/>
<Setter Property="Foreground" Value="#253135"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="12"
Name="Border">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is just to give you the idea:
I removed all Margin properties, in order to not use an absolute position, but relative positions if you want to achieve a dynamic layout.
I put your left part of the layout into a grid with three rows where the first two are for your headers text, and the last one for the buttons.
In the last row I put another grid with two rows and two columns where each cell contains a buttons
This part of markup corresponds to the next grid after your: <Grid Margin="12">:
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="48"
Foreground="#FFE0D2D2"
Text="Hi"
TextWrapping="Wrap" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="#FFE0D2D2"
Text="Please choose one option below to get started quickly."
TextWrapping="Wrap" />
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Name="QuickGuide"
Grid.Row="0"
Grid.Column="0"
Background="#253135"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Quick Guide"
TextAlignment="Center" />
</Button>
<Button
Name="PlanAMeeting"
Grid.Row="1"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
Text="Plan a meeting"
TextAlignment="Center" />
</Button>
<Button
Name="StartAMeeting"
Grid.Row="1"
Grid.Column="0"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center"
TextWrapping="Wrap">
Start a scheduled
<LineBreak />
meeting
</TextBlock>
</Button>
<Button
Name="CreateAMeeting"
Grid.Row="0"
Grid.Column="1"
Style="{StaticResource FlatButtonStyle}">
<TextBlock
VerticalAlignment="Center"
FontSize="12"
Foreground="AntiqueWhite"
TextAlignment="Center">
Create a new
<LineBreak />
meeting for now
</TextBlock>
</Button>
</Grid>
</Grid>
I have an issue im struggling a day now. Im trying to center some controls into a Grid layout. I have 2 columns and i want half of the controls centered ad the 1st column and other half to the second column
When the window resize some of them get "eaten" on the edges , and i wasent able to identify the issue
Can anyone spot the issue?
<Grid Margin="0,2,0,-2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//.......
<ComboBox x:Name="optMenuLeft" Margin="0,271,0,0" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2" />
<Label Content="Menu" Margin="141,271,390,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="69" Grid.RowSpan="2" />
<ComboBox x:Name="optBedOccupancyLeft" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" HorizontalAlignment="Center" Width="170" Margin="0,240,0,0"/>
<Label Content="Bed Occupancy" Margin="0,240,270,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.......
<ComboBox Name="optMenuRight" Margin="255,271,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170"/>
<Label Content="Menu" Margin="176,271,353,0" Grid.Column="1" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="71"/>
<ComboBox Name="optBedOccupancyRight" Margin="255,240,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2"/>
<Label Content="Bed Occupancy" Grid.Column="1" Margin="0,240,200,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.....
The simplest way is to use grids inside grid. The outer grid will split the window into two columns. The inner grids will split the columns into four cells (2x2). Just center the inner grids and it will work like a charm.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftColumn" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Bed Occupancy" />
<ComboBox x:Name="optBedOccupancyLeft" Grid.Column="1" />
<Label Content="Menu" Grid.Row="1"/>
<ComboBox x:Name="optMenuLeft" Grid.Column="1" Grid.Row="1" />
</Grid>
<Grid x:Name="RightColumn" VerticalAlignment="Center" HorizontalAlignment="Center>
<!-- the same as left column -->
</Grid>
</Grid>
Btw, notice, that when you want split some are to equal columns (or rows or both), you can use UniformGrid:
<UniformGrid x:Name="LayoutRoot" Rows="1">
<Grid x:Name="LeftColumn" />
<Grid x:Name="RightColumn" />
</UniformGrid>
There is also more advanced approach that I often use:
Use UniformGrid to define columns. The xaml is smaller and cleaner.
Use HeaderedContentControl to define labels and inputs
Use Grid's SharedSizeScope feature, to make width of label equal: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid.issharedsizescope%28v=vs.110%29.aspx
<UniformGrid x:Name="LayoutRoot" Rows="1">
<StackPanel x:Name="LeftColumn" Grid.IsSharedSizeScope="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<HeaderedContentControl Header="Bed Occupancy" Style="{StaticResource LabelValueContentControl}">
<ComboBox x:Name="optBedOccupancyLeft" />
</HeaderedContentControl>
<HeaderedContentControl Header="Menu" Style="{StaticResource LabelValueContentControl}" >
<ComboBox x:Name="optMenuLeft" />
</HeaderedContentControl>
</StackPanel>
<StackPanel x:Name="RightColumn" Grid.IsSharedSizeScope="True">
<!-- the same as left column -->
</StackPanel>
</UniformGrid>
The LabelCalueControlStyle is take advantage of shared column size
<Style x:Key="LabelValueContentControl" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelValueContentControl.Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Right" />
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?
You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.
I have grid view in windows phone xaml page and this grid contains many UI element like buttons, checkboxes and textboxes. I want to search some specific UIElement by name from that grid and want to get value of that UIElement and set some new values as well. How I can get that UIElement from that grid with Visual Tree helper in code behind.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240" />
<ColumnDefinition Width="240" />
</Grid.ColumnDefinitions>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Border1">
<Image Width="110" Height="110" Stretch="Fill" Name="Image1" Tap="Image1_Tap" />
</Border>
<Border BorderThickness="2" BorderBrush="Transparent" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Name="Border2">
<Image Width="110" Height="110" Stretch="Fill" Name="Image2" Tap="Image2_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="2" Grid.Column="0" Name="Border3">
<Image Width="110" Height="110" Stretch="Fill" Name="Image3" Tap="Image3_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="0" Name="Border4">
<Image Width="110" Height="110" Stretch="Fill" Name="Image4" Tap="Image4_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Left" Grid.Row="5" Grid.Column="0" Name="Border5">
<Image Width="110" Height="110" Stretch="Fill" Name="Image5" Tap="Image5_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" Name="Border11">
<Image Width="110" Height="110" Stretch="Fill" Name="Image11" Tap="Image11_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="1" Name="Border22">
<Image Width="110" Height="110" Stretch="Fill" Name="Image22" Tap="Image22_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="1" Name="Border33">
<Image Width="110" Height="110" Stretch="Fill" Name="Image33" Tap="Image33_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="1" Name="Border44">
<Image Width="110" Height="110" Stretch="Fill" Name="Image44" Tap="Image44_Tap" />
</Border>
<Border BorderThickness="2" HorizontalAlignment="Right" Grid.Row="5" Grid.Column="1" Name="Border55">
<Image Width="110" Height="110" Stretch="Fill" Name="Image55" Tap="Image55_Tap" />
</Border>
</Grid>
I want to match options. Lets Say Left Side Some Images Are Clicked And Its Border Changed And Once On Right SIde Clicked Which Option is Matched Either Left SIde Have Some Selection or Not
Can you tell me what exactly you want to get from the grid elements, because there are only Borders and Images inside. You can find elements via this generic coding. (ContentPanel is your grid name), You can get the Border and Image and other controls name and other properties as well on the following procedure.
foreach (var child in ContentPanel.Children)
{
if (child is Border)
{
var borderName = (child as Border).Name;
// if you wana get the image inside border, then do this.
var getBorderChlid = (item as Border).Child;
if (getBorderChlid is Image)
{
var getImgName = (getBorderChlid as Image).Name;
}
}
}
If this help you then well and good, otherwise explain your quest a bit more, then I will send you the exact code InshaAllah.
I've created a ControlTemplate that contains a Grid with two rows.
Sadly, there appears to be a single pixel gap between the cells.
How do I remove the gap?
Here's a screenshot showing the gap:
...and here's the XAML:
<Window x:Class="MAQButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="695" Width="996">
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="OverridesDefaultStyle" Value="True"/>
</Style>
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444" Margin="0" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#e9f1f6"></Grid>
<Grid Grid.Column="1" Background="#d2e3ed">
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="22" FontWeight="Medium" Margin="52,58,0,0" Foreground="#0c3d5d">Your Quizzes <TextBlock FontFamily="Segoe UI" FontSize="18" FontWeight="Medium" Foreground="#0c3d5d">(7)</TextBlock></TextBlock>
<Grid Margin="0,20,0,0">
<Button Width="444" Background="{x:Null}" BorderThickness="0" Template="{StaticResource ButtonTemplate}" Click="DoSomething" BorderBrush="#032135">
<TextBlock Margin="6,2.8,0,0" FontFamily="Segoe UI" FontSize="19" Foreground="#032135" FontWeight="Medium">This is a second piece of text</TextBlock>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
</Window>
Just add SnapsToDevicePixels="True" in your template grid
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444" Margin="0" ShowGridLines="False" SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>
Set
SnapsToDevicePixels="True"
On grids in template or button, but better just create new style with SnapsToDevicePixels="True" setter and template inside style.