I am using Telerik framework on WPF/C# project and controls are not visible in design. When I run the app, the controls (eg., RadButton) is displayed fine. Why is this happening? While default controls are working just
<Window x:Class="TelerikWpfApp4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
Title="MainWindow" Height="350" Width="525">
<Grid>
<telerik:RadRadioButton x:Name="radRadioButton" Content="Button" HorizontalAlignment="Left" Height="Auto" IsChecked="False" VerticalAlignment="Top" Width="Auto" Margin="24,42,0,0"/>
<telerik:RadListBox HorizontalAlignment="Left" VerticalAlignment="Top" Width="250">
<telerik:RadListBoxItem Content="Item 1"/>
<telerik:RadListBoxItem Content="Item 2"/>
<telerik:RadListBoxItem Content="Item 3"/>
</telerik:RadListBox>
<telerik:RadToggleButton x:Name="radToggleButton" Content="Button" HorizontalAlignment="Left" Height="Auto" IsThreeState="False" IsChecked="False" VerticalAlignment="Top" Width="Auto"/>
<telerik:DataFormDateField HorizontalAlignment="Left" VerticalAlignment="Top" Margin="322,85,0,0"/>
<telerik:RadSplitButton Content="Button" HorizontalAlignment="Left" Height="Auto" IsOpen="False" IsChecked="False" VerticalAlignment="Top" Width="Auto"/>
<telerik:RadSplitButton Content="Button" HorizontalAlignment="Left" Height="Auto" IsOpen="False" IsChecked="False" VerticalAlignment="Top" Width="Auto"/>
<telerik:RadRadioButton x:Name="radRadioButton1" Content="Button" HorizontalAlignment="Left" Height="Auto" IsChecked="False" VerticalAlignment="Top" Width="Auto"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="175,142,0,0"/>
<telerik:RadButton x:Name="radButton" Content="segfsdhshdh" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Top" Width="Auto" Margin="21,32,0,0"/>
</Grid>
I have had this issue before, and it had to do with the referenced assembly I was using. Telerik has two assembly reference types xaml and noxaml, once I deleted my references and replaced them with the correct ones, I had no issues. Here are a couple of links to the Telerik documentation about the issue:
https://docs.telerik.com/devtools/wpf/common-information/troubleshooting/invisible-controls
https://docs.telerik.com/devtools/wpf/styling-and-appearance/xaml-vs-noxaml
Related
I need to add a multiple buttons inside a groupbox in wpf, but I can't. I need to create my key pad for an atm machine, with all numbers, but if I try to create a button number 2, the button number 1 disappears.
what is wrong?
<Window x:Name="Win_Users" x:Class="ATM_Simulator.WindowUsers"
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:ATM_Simulator"
mc:Ignorable="d"
Title="WindowUsers" Height="300" Width="500">
<Grid>
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Button x:Name="btn_1" Content="1" HorizontalAlignment="Left" Margin="10,13,0,0" VerticalAlignment="Top" Width="29" Height="32"/>
</GroupBox>
<GroupBox x:Name="grbx_select_transaction" Header="Select Transaction :" HorizontalAlignment="Left" Height="88" Margin="291,23,0,0" VerticalAlignment="Top" Width="179"/>
<GroupBox x:Name="grbx_select_account" Header="Select Account" HorizontalAlignment="Left" Height="92" Margin="291,138,0,0" VerticalAlignment="Top" Width="179"/>
<Button x:Name="btn_submit" Content="Submit" HorizontalAlignment="Left" Margin="291,239,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="btn_close" Content="Close" HorizontalAlignment="Left" Margin="393,239,0,0" VerticalAlignment="Top" Width="77"/>
</Grid>
You have to put a container inside the GroupBox, for example a Grid would be a good choice:
<GroupBox x:Name="grbx_key_pad" Header="Key Pad" HorizontalAlignment="Left" Height="220" Margin="26,10,0,0" VerticalAlignment="Top" Width="189">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_1" Grid.Column="0" Content="1" Width="29" Height="32"/>
<Button x:Name="btn_2" Grid.Column="1" Content="2" Width="29" Height="32"/>
<!-- more buttons -->
<Button x:Name="btn_4" Grid.Row="1" Grid.Column="0" Content="4" Width="29" Height="32"/>
<!-- yet more buttons -->
</Grid>
</GroupBox>
Currently trying to build simpliest cross-resolution app (in other words an adaptive UI). The Apps itself is intended to start at min res:1024x768 and max res: 1920x1080.
However I have no success in doing of that.
this is 1024x768 window, where everything looks good.
this is 1920x1080 window, where controls "swam". However pic adapted itself to resolution.
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top" Margin="430,503.6,468.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top" Margin="752,503.6,146.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top" Margin="148,503.6,750.6,0" Grid.Row="1" Grid.RowSpan="2">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
</GroupBox>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
Layout via fixed Margins in not adaptive. There is nothing wrong in using nested Panels:
UniformGrid can arrange equal space for each child element (GroupBox).
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<UniformGrid Rows="1" Grid.Row="2">
<GroupBox x:Name="groupBox_Copy" Header="Truck2" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy1" Header="Truck3" Height="148" VerticalAlignment="Top">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
<GroupBox x:Name="groupBox_Copy2" Header="Truck1" Height="148" VerticalAlignment="Top">
<Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</UniformGrid>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
</Grid>
1024x768.
1920x1080.
Looks a little better. However, the controls "swam" to left direction. As can be seen.
<Window x:Class="WpfApplication2.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:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="512*"/>
<RowDefinition Height="160*"/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.Row="1" Source="Resources/truck.png"/>
<Grid HorizontalAlignment="Left" Height="138" Margin="10,9.6,0,0" Grid.Row="2" VerticalAlignment="Top" Width="998">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="171*"/>
<ColumnDefinition Width="143*"/>
<ColumnDefinition Width="120*"/>
</Grid.ColumnDefinitions>
<GroupBox x:Name="GroupBox1" Grid.Column="1" Header="Truck1" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,147.6,0">
<Button x:Name="button_Copy2" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox2" Grid.Column="3" Header="Truck2" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,171.6,0">
<Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-1.211,-0.299"/>
</GroupBox>
<GroupBox x:Name="GroupBox3" Grid.Column="5" Header="Truck3" Background="SeaShell" Grid.ColumnSpan="2" Margin="0.4,0,120.4,0">
<Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="59,23,-2,0" VerticalAlignment="Top" Width="75"/>
</GroupBox>
</Grid>
</Grid>
I just started using WPF (instead of winforms) and I'm trying to create a fixed-sized window (see image).
Problem is, whenever I run the app the bottom right corner gets messed up, having near zero space between the button and the edge. (see other image)
Here's the XAML code (mostly generated by the Visual Studio designer)
<Window x:Class="UseCaseHelper.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:UseCaseHelper"
mc:Ignorable="d"
Title="UseCaseHelper" Height="500" Width="900">
<Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75"/>
<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="809,441,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>
</Window>
I've tried googling for a solution without much success. Hopefully someone can point out what I'm doing wrong here.
I always find DockPanel more flexible in these settings. Instead of the VerticalAlighnment and the Margin you set, you can set DockPanel.Dock to Left, Right, Bottom or Top.
<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top"
Content="Button" HorizontalAlignment="Left" Margin="10,10,0,0"
Width="75"/>
<Button DockPanel.Dock="Bottom"
Content="Button" HorizontalAlignment="Right" Margin="0,0,10,10" Width="75"/>
</DockPanel>
Note that you can also use Margin="10" for both Buttons.
However, if you want to use Grid, you can use the following structure:
<Grid>
<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
Width="75"/>
<Button Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" Width="75"/>
</Grid>
Note that in this case they will overlap if the Window is small enough.
Another option is to add RowDefinitions and ColumnDefinitions to the Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button
Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
Width="75"/>
<Button Grid.Column="2" Grid.Row="2"
Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,10,10" Width="75"/>
</Grid>
Its perfomance is better than the other two, if Window is very small.
So, it is my first time working with a wpf application in VS 2012 for windows desktop.
I put some background image in to a window. I put three text boxes and a button on to that window. Now I have a problem, when I start the application and I change the size of a window with mouse or go fullscreen, the window changes its size, but textboxes and button stay at the same position as before, and they do not really fit into that design. I hope I was clear enough. Thank you for your help.
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="768" Width="1366
">
<Grid RenderTransformOrigin="0.495,0.498" Margin="0,10,0,0">
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="209" Margin="209,211,0,0" VerticalAlignment="Top" Width="396">
<TextBox x:Name="tockeMaturaTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" Margin="10,0,0,176"/>
<TextBox x:Name="tretjiLetnikTextBox" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" RenderTransformOrigin="0.899,3.574" Margin="10,63,0,0"/>
<TextBox x:Name="cetrtiLetnikTextBox" HorizontalAlignment="Left" Height="23" Margin="10,115,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="361,224,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" HorizontalAlignment="Left" Margin="323,133,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" RenderTransformOrigin="-0.375,0.338" Height="73" Width="113"/>
</Grid>
</Grid>
</Window>
Give the XAML below a try:
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="211"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<StackPanel Grid.Row="1" Grid.Column="1" >
<TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
<TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
<TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="73" Width="113"/>
</StackPanel>
</Grid>
WPF uses a container-based (relative) layout system. You were placing your textboxes in absolute positions by defining their margins precisely with respect to the parent grid. In the example above, they are placed in a StackPanel which is inside the grid.
With all the extra margins and absolute widths and heights, it's hard to tell what final result you are going for, but the XMAL above should get you close. You can change the relative sizes of the grid rows and columns to get what you need; or completely redefine the structure of the Grid.
I think a good tutorial on WPF is in order to get a handle on the basic conocepts:
Silverlight/WPF Introduction. This is geared a little bit towards Silverlight, but the layout principles are identical to WPF. Actual training starts at 8:17 in the video.
EDIT
For magical expanding and shrinking content, use the code below:
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<ImageBrush ImageSource="slike/education_board.jpg"/>
</Grid.Background>
<Viewbox Grid.Row="1" Grid.Column="1" >
<StackPanel>
<TextBox x:Name="tockeMaturaTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Width="120" TextChanged="TextBox_TextChanged_1" IsManipulationEnabled="True" />
<TextBox x:Name="tretjiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120" />
<TextBox x:Name="cetrtiLetnikTextBox" Margin="0,5" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button x:Name="button" Margin="5" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBlock x:Name="skupneTockeTextBlock" Margin="5" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="73" Width="113"/>
</StackPanel>
</Viewbox>
</Grid>
<Window x:Class="DataBinding_01.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<TextBox Height="23" Name="textBox1" Width="Auto" />
<TextBox Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</StackPanel>
</Window>
I want the Button fill all available space on the StackPanel. How can I do it?
If you mean fill all horizontal and vertical space you should use a DockPanel.
<DockPanel Height="Auto" Name="stackPanel1" Width="Auto" LastChildFill="True">
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox1" Width="Auto" />
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DockPanel>