Develop Reference

XAML design in Visual Studio different from actual program display

I have a desktop application I am building in C# with XAML. I am having troube with the XAML side of things, and how its displayed on the preview compared to the actual program view.
I have tried putting the elements I am using into a grid, a stackPanel but it still has the same issue. Here is what the program should look like:
And how it actually appears in the program:
<Page x:Class="project.PayFees"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:mosque"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="Pay Fees">
<Grid>
<Grid>
<Label Margin="67,90,641,328" Content="Amount Paid"/>
<Button Command="{Binding PayFees}" Content="Pay Fees" Margin="584,405,10,10"
RenderTransformOrigin="1.172,-3.328"/>
<Label Margin="67,62,691,360" Content="Date" RenderTransformOrigin="0.684,-0.03"/>
<TextBox x:Name="StudentID" Text="{Binding StudentID}" Width="130"
Margin="159,126,511,290" RenderTransformOrigin="-0.285,-6.056" />
<Label Content="Student ID" RenderTransformOrigin="3.77,3.251" Margin="67,126,663,292"/>
<TextBox x:Name="AmountPaid" Text="{Binding AmountPaid}" Width="130"
Margin="159,90,511,328" RenderTransformOrigin="0.039,0.004"/>
<TextBox Text="{Binding Date}" HorizontalAlignment="Left" Margin="159,52,0,0"
VerticalAlignment="Top" RenderTransformOrigin="2.704,6.1" Width="130" Height="32"/>
<Button Content="Load Student" HorizontalAlignment="Left" Margin="306,136,0,0"
VerticalAlignment="Top" Width="86" Height="22" Click="Button_Click"/>
<Label x:Name="studentName" Content="" HorizontalAlignment="Left" Margin="159,165,0,0"
VerticalAlignment="Top" Width="130"/>
</Grid>
</Grid>
This is my XAML code.
I can't figure out why this is happening - any advice is appreciated.

c# wpf getting input from textbox in dynamically generated DataTemplate objects

I'm a newcomer to C# WPF programming, and I'm having difficulty (spent a whole day on this) figuring out how to create a system where:
1) A collection of UI elements (in a groupbox) is generated with a click of a button.
2) The groupbox has a textbox (for int inputs) and a combobox (selection among strings). I need to populate combobox with the elements of a list.
I need to take input from the textbox and selection from combobox and place it in a List of my structs Rules{ String topic; int number}.
This needs to be done for as many of the groupboxes the user generates.
The main question I have is, how do I access these comboboxes to populate them? How Do i get input from them?
xaml
<Window x:Class="ExamMaker.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:ExamMaker"
mc:Ignorable="d"
Title="Exam Preparation" Height="350" Width="525"
Closing="Window_Closing">
<Window.Resources>
<DataTemplate x:Key="ruleTemplate">
<GroupBox x:Name="Rulebox" Header="Rule " HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="56" Width="468">
<Grid HorizontalAlignment = "Left" Height="36" Margin="0,0,-2,0" VerticalAlignment="Top" Width="458">
<Label x:Name="TopicRuleLabel" Content="Topic:" HorizontalAlignment="Left" Margin="5,4,0,0" VerticalAlignment="Top" Height="28"/>
<TextBox x:Name="NumberRuleTextBox" HorizontalAlignment="Left" Height="22" Margin="240,9,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="30" />
<ComboBox x:Name="RuleComboBox" HorizontalAlignment="Left" Margin="50,9,0,0" VerticalAlignment="Top" Width="120"/>
<Label x:Name="NumberRuleLabel" Content="Number:" HorizontalAlignment="Left" Margin="179,4,0,0" VerticalAlignment="Top" Height="28"/>
</Grid>
</GroupBox>
</DataTemplate>
</Window.Resources>
<Grid>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517">
<TabItem Header="Exam Preparation">
<Grid Background="#FFE5E5E5" Margin="0,0,0,0">
<ListView x:Name="listView" ItemsSource="{Binding Path=examQS}">
<ContentControl ContentTemplate="{StaticResource ruleTemplate}">
</ContentControl>
</ListView>
</Grid>
</TabItem>
<TabItem Header="Question Form" Margin="-2,0,0,0" HorizontalAlignment="Left" Width="95">
</TabItem>
<TabItem Header="Setup" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="54">
</TabItem>
</TabControl>
</Grid>
</Window>
As for the c#, well I only have one Observable collection in there and some methods for adding and removing items from it.

Ok, based on what I see, I think here is how you can go about this:
ItemsSource="{Binding Path=examQS}"
assuming you have property ObservableCollectionexamQS
1. Define a property in examQs lets say "comboItemSource"
change this line in your DataTemplate by adding a binding on ItemSource: <ComboBox x:Name="RuleComboBox" HorizontalAlignment="Left" Margin="50,9,0,0" VerticalAlignment="Top" Width="120" ItemSource="{Binding Path=comboItemSource} />
Change to use ItemTemplate
<ListView x:Name="listView" ItemsSource="{Binding Path=examQS}" ItemTemplate="{StaticResource ruleTemplate}"/>
I think the above should work.

Accessing the BorderBackground of a user control in WinRT application

I have a project consisting of two pages. One page is having th XAML of a User control developed by me.
The another page has the logic of cropping the image that is present in the image box on that page. I want to use my control on that page and assign the border background of the user control to the image cropped .
The following code is of my UserControl XAML ! The cs file for this page has no code implementation
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" Margin="112,0,108,0">
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="41" Canvas.Top="40" Margin="-40,0,0,0">
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
<Border.Background>
<ImageBrush x:Name="image1" ImageSource="/Assets/images.jpg" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
In the user control XAML , we can see that I have set the
to a static image. I want to access this user control to another page and want to assign the element to the cropped image output on the other page. The other page MainPage.Xaml has the code for image cropping.
Any help would be appreciated

C# XAML Flyout change headerbackground color

I made a flyout in C# with XAML now i want to change the background color of the space reserved for the title and back button. But that area is not defined in the flyout pages. Does anyone know how I can change the background color of the panel surrounding the title and backbutton?
<SettingsFlyout
x:Class="CatalogApp.FlyoutControl.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CatalogApp.FlyoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
IconSource="Assets/SmallLogo.png"
Title="Login"
d:DesignWidth="346">
<!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RenderTransformOrigin="0.458,1.194" Width="250" >
<!-- The StackPanel(s) below define individual content sections -->
<!-- Content Section 1 Maring: left, up, down, right-->
<TextBlock x:Name="LBLuserName" TextWrapping="Wrap" Text="Username" FontSize="18" Margin="10,0,0,0"/>
<TextBox x:Name="TbUserName" TextWrapping="Wrap" Margin="10,0,0,0"/>
<TextBlock x:Name="LBLpassWord" TextWrapping="Wrap" FontSize="18" Text="Password" Margin="10,20,0,0"/>
<TextBox x:Name="TbPassWord" TextWrapping="Wrap" Margin="10,0,0,0" KeyDown="TbPassWord_KeyDown"/>
<TextBlock x:Name="TAWebService" TextWrapping="Wrap" Text="WebserviceURL (Inclusief HTTP://)" Margin=" 10,20,0,0" FontSize="15"/>
<TextBox x:Name="TBWebServiceURL" TextWrapping="Wrap" Margin="10,0,0,20" PlaceholderText=""/>
<Button x:Name="BTCheckConnection" Content="Check connectie" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,0,100,0" Click="BTCheckConnection_Click"/>
<TextBlock x:Name="TBConnection" TextWrapping="Wrap" Margin="10,20,0,0"/>
<Button x:Name="btTrue" Content="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="btTrue_Click"/>
<Button x:Name="btFalse" Content="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="btFalse_Click"/>
<!-- Content Section 1-->
<!-- Define more Content Sections below as necessary -->
</StackPanel>

You'll just add HeaderBackground like;
<SettingsFlyout
x:Class="CatalogApp.FlyoutControl.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CatalogApp.FlyoutControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
IconSource="Assets/SmallLogo.png"
Title="Login"
d:DesignWidth="346"
HeaderBackground="Green">
Cheers

How to place an XAML usercontrol in a grid

I have the following main.xaml and usercontrol.
I need to place several times the user control on the 2nd row, 2nd column of the grid, By using visual studio it wont allow to drag and drop the user control, so I suppose I have to do it by code, I just dont know how
MainPage.xaml
<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" x:Name="grid" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="White" BorderThickness="3" Grid.Column="1" Background="Red" CornerRadius="30"/>
<TextBlock x:Name="txtCountry" Grid.Column="1" TextWrapping="Wrap" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock x:Name="txtTime" Grid.Row="1" TextWrapping="Wrap" FontSize="180" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Usercontrol
<UserControl
x:Class="AlarmPro.TimeOnCity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AlarmPro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="250">
<Grid Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="#FFDE6A6A" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#FFDC4646">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Background="#FFAE4F00">
<TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
</Border>
</Grid>
</UserControl>

Do you mean like this?
<my:UserControlName Grid.Column="2" Grid.Row="2" ... />
<my: in this case is the alias for the CLR namespace the UserControl resides in. It is defined at the top of your XAML, inside the <Window> or <UserControl> tag depending on context.
For example,
<Window ...
xmlns:my="clr-namespace:AssemblyName"
...
/>

MainPage.Xaml
<Page
x:Class="UserControlExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="MainContent" Background="Azure" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<local:UserControl1 x:Name="MyHelloWorldUserControl" Grid.Row="1" />
</ScrollViewer>
</Grid>
</Page>
UserControl1.xaml
<UserControl
x:Class="UserControlExample.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UserControlExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="Bisque">
<StackPanel>
<StackPanel Orientation="Horizontal" Height="81">
<TextBlock Text="Your Name is" Foreground="Blue" FontSize="30" Margin="0,0,0,10"/>
<TextBox x:Name="Input" Background="White" Width="225" />
</StackPanel>
<Button Content="Click Me" Foreground="Brown" FontSize="30" Click="Button_Click"/>
<TextBlock x:Name="Output" FontSize="100"/>
</StackPanel>
</Grid>
</UserControl>

MainPage.xaml, I am binding a login UserControl
by using the namespace : xmlns:UC="clr-namespace:Test.Views" , since I have my usercontrol in Folder named "Views".
<ScrollViewer>
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
</ScrollViewer>
Login.cs
public partial class Login : UserControl {
public event EventHandler BtnLoginClick;
public Login()
{
InitializeComponent();
}
private void btnLogin_Click(object sender, RoutedEventArgs e)
{
string userName = txtUserName.Text;
string userPassword = txtUserPassword.Password.Trim();
if (userName != null && userName != string.Empty && userPassword != null && userPassword != string.Empty)
{
if (this.BtnLoginClick != null)
{
this.BtnLoginClick(this, e);
}
}
else
{
MessageBox.Show("Invalid username or password");
}
}
}
Finally, dont forgot to use the event handler in MainPage.xaml to capture the button clicked event from Login Usercontrol to do other actions.
MainPage.xaml
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
Here "BtnLoginClick" its an event Handler defined in the Login.xaml[User Control].
Create new event for this "BtnLoginClick" event as i created "Login_BtnLoginClick".
MainPage.cs
private void Login_BtnLoginClick(object sender, EventArgs e)
{
Messagebox.Show("Event captured successfully");
////Here you can add your stuffs...
}

For UWP, in UserControl.xaml, find the local namespace xmlns:local notation: xmlns:local="using:ProjectName.Folder" at the top (by convention, C# namespaces are named the same way as the folder that contains them, so folder also means namespace).
In MainPage.xaml, add a reference to this namespace. The reference prefix can be any name desired: for example, CustomPrefix, as in xmlns:CustomPrefix="using:ProjectName.Folder". Then, anywhere in MainPage.xaml, display the control by prefixing its name with <CustomPrefix:...>.
UserControl.xaml
<UserControl
xmlns:local="using:ProjectName.Folder">
MainPage.xaml
<Page
xmlns:CustomPrefix="using:ProjectName.Folder">
<CustomPrefix:UserControl />
</Page>
The project needs to be built to discard XAML errors in Visual Studio, otherwise the design view remains blank and the XAML has green squiggles.