Iam creating an WPF application within Visual Studio 2017. For a time everything was fine but at some time (I expect when I introduced telerik elements, but not for sure) my Xaml Designer is just an empty rectangle with nothing inside. The Applikation works fine when executed, all Gui Elements show up but not in the Designer. This offcourse is an problem since I want to customize the Gui further.
Iam unsure if this issue is Telerik, Code or Visual Studio related. But I suspect some faulty telerik Code to be the main culprit.
Here a trimmed down Version o the Xaml Code I use:
<telerik:RadWindow x:Class="XY.Views.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"
xmlns:navigation="clr-namespace:Telerik.Windows.Controls.Navigation;assembly=Telerik.Windows.Controls.Navigation"
navigation:RadWindowInteropHelper.ShowInTaskbar="True"
Header="BSD Reader" Height="400" Width="750" WindowStartupLocation="CenterScreen">
<!-- Grid Definition -->
<Grid Margin="0,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" MinWidth="290" >
</ColumnDefinition>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="25"/>
<RowDefinition Height="Auto" MaxHeight="250" MinHeight="30"/>
<RowDefinition Height="Auto" MaxHeight="250" MinHeight="150"/>
<RowDefinition Height="Auto" MaxHeight="250" MinHeight="150"/>
</Grid.RowDefinitions>
<!--Grid 0/0 Menü Band-->
<telerik:RadMenu Grid.ColumnSpan="2">
</telerik:RadMenuItem>
<telerik:RadMenuItem Header="View" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
</telerik:RadMenuItem>
</telerik:RadMenu>
<!--Grid 1/1-->
<telerik:RadComboBox >
</telerik:RadComboBox>
<!--Grid 1/2-->
<GroupBox x:Name="gb_Info" Grid.Column="1" Grid.Row="2" Header="Information"
Margin="0,0,0,0" />
<!--Grid 1/3-->
<GroupBox x:Name="gb_FileInfo" Grid.Column="1" Grid.Row="3" Header="File Information"
Margin="0,0,0,0" />
<!--Grid 2/0-->
<telerik:RadGridView x:Name="XY" Grid.Row="1" Grid.RowSpan="2"
ShowSearchPanel="True" ShowGroupPanel="False" ItemsSource="{Binding Signals, UpdateSourceTrigger=PropertyChanged}"
AutoGenerateColumns="False">
<telerik:RadGridView.Columns >
<telerik:GridViewDataColumn DataMemberBinding="{Binding xxx}" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding xxx}" />
<telerik:GridViewDataColumn DataMemberBinding="{Binding xxx}" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
<telerik:RadPaneGroup Grid.Row="3" >
<telerik:RadPane Header="XY" PaneHeaderVisibility="Hidden">
<telerik:RadTreeListView>
<telerik:RadTreeListView.ChildTableDefinitions>
</telerik:RadTreeListView.ChildTableDefinitions>
</telerik:RadTreeListView>
</telerik:RadPane>
</telerik:RadPaneGroup>
</Grid>
</telerik:RadWindow>
not much to see, i know, but thats kinda the point ^^
If you are using No-XAML assemblies, make sure your main application class is called App within App.cs and App.xaml.cs files.
I've stumbled into the same problem when adding Telerik No-Xaml controls to an existing .Net Core 3.1 WPF application. Merged dictionaries were set up according Telerik guidance, but XAML designer was showing only a blank rectangle. After renaming the app class back to default App everything went back to normal.
I had this issues as well and tried all the solutions above. Solution I found was to toggle project code in the designer and everything is working now.
Related
I'm trying to add a border to some controls in XAML - the problem is, whenever I apply wrapping a certain element it wraps the whole window, probably on the first grid element?
This also happens when I try to use it around the WebBrowser. Any suggestions?
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RAT-t00l" Height="850" Width="700">
<Grid x:Name="BigGrid" HorizontalAlignment="Right" Width="682">
<TextBox Name="txt_Log" HorizontalAlignment="Left" Height="657" Margin="4,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="417" IsReadOnly="True"/>
<Button Name="btn" Click="btn_Connect_Click" Background="LightGreen" Content="Connect" HorizontalAlignment="Left" Margin="266,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_disc" Click="btn_Disconnect_Click" Background="Pink" Content="Disconnect" HorizontalAlignment="Left" Margin="346,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_fetch" Click="btn_Fetch_Click" Content="Fetch data" HorizontalAlignment="Left" Margin="266,707,0,0" VerticalAlignment="Top" Width="155" Height="24"/>
<Button Name="btn_eraseLog" Click="btn_EraseLog_Click" Content="Erase log from target" HorizontalAlignment="Left" Margin="266,736,0,0" VerticalAlignment="Top" Width="155" Height="25"/>
<WebBrowser
Name="map"
HorizontalAlignment="Left"
Height="347"
Margin="426,10,0,0"
VerticalAlignment="Top"
Width="246"
LoadCompleted="wb_LoadCompleted"
/>
Here's the border. Meaning to wrap only the grid inside.
<Border Name="mask" CornerRadius="20" Height="auto" Width="auto" BorderThickness="1" BorderBrush="Black">
<Grid x:Name ="GeneralGrid" Margin="426,362,10,291" ShowGridLines="True" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="61*" ></ColumnDefinition>
<ColumnDefinition Width="185*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="IP">IP</TextBlock>
<TextBlock Name="ISP" Grid.Row="1">ISP</TextBlock>
<TextBlock Name="Location" Grid.Row="2">Location</TextBlock>
<TextBlock Name="Longitude" Grid.Row="3">Longitude</TextBlock>
<TextBlock Name="Latitude" Grid.Row="4">Latitude</TextBlock>
</Grid>
</Border>
</Grid>
</Window>
I would recommend that you do NOT continue to use the Visual Studio Designer as you have been. It does a very poor job of creating the XAML that we actually want. For example, your UI elements have all got an exact Margin set on them (thanks to the VS Designer I imagine) and this can make things awkward for you later on.
WPF was really designed to enable developer to use resizable controls so that the UI can resize itself when the user resizes the application. Different Panels provide different sizing abilities to their child controls and you can find out more about that from the Panels Overview page on MSDN. However, back to your question regarding the Grid class.
Because you have used the Visual Studio Designer, your controls have not ended up in the Grid cells that you wanted, instead just being placed 'on top of', or 'in front of' them. In order to place a control into a particular Grid cell, you need to set the Grid.Row and/or Grid.Column Attached Properties. See this example taken from the last linked page from MSDN:
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
</Grid>
You appear to have placed all your BigGrid elements into a single cell of that layout grid, and the only thing stopping them from appearing on top of each other is the fact you've defined margins. You have not defined a margin for your border, but then defined margins for its children, which means they'll be offset.
Really, for best layout, you want to avoid margins as much as possible and divide your BigGrid into rows and columns. Then place your UI into those cells. If your border is within its own cell you will not have it appear to wrap everything.
I am trying to produce a simple User Control that allows a user to enter notes and review the notes he or she has taken. For now, I have a ListBox to show previous notes and a TextBox to enter a new note. The ListBox also uses TextBoxs to show the individual notes. The logic is all working. Now I'd just like the control to look a little nicer. I am not seeing text wrapping when one of the notes is long. Nor am I seeing text wrapping on the TextBox where I enter a new note. I have tried to research this and have found the warnings about using StackPanels. Hence no stack panels here! Here is my XAML
<UserControl.Resources>
<DataTemplate x:Key="DefaultTemplate">
<Grid x:Name="GridItem" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox x:Name="NoteText" Grid.Column="0" Margin="0,5,5,0" Text="{Binding Path=NoteText}" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="{Binding Path=NewNoteText, UpdateSourceTrigger=PropertyChanged}" LostFocus="TextBox_LostFocus">
<TextBox.InputBindings>
<KeyBinding Command="{Binding Path=AddNote}" Key="Enter"/>
</TextBox.InputBindings>
</TextBox>
<ListBox Grid.Row="1" ItemsSource="{Binding Path=Notes}" Margin="5" ItemTemplate="{DynamicResource DefaultTemplate}" SelectionChanged="NotesControl_SelectionChanged">
</ListBox>
</Grid>
I have tried specifying Width="*" in the UserResources. That made no difference. I don't really want to specify a maximum width for either TextBox if I can help it.
And here is how I use it in the main test form:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" ></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<ctrlLib:RecordingListControl Grid.Row="0" Name="_ctrlRecordings"
PatientIdAndSessionNumber="{Binding PatientIdAndSessionNumberMain, Mode=TwoWay}"
SelectedItem="{Binding SelectedItemMain, Mode=OneWayToSource}" />
<Label Grid.Row="1" Content="{Binding SelectedItemMain.RecordingName}" />
<ctrlLib:NotesControl Grid.Row="2" Name="_ctrlNotes" PatientIdAndSessionNumber="{Binding PatientIdAndSessionNumberMain, Mode=TwoWay}" />
</Grid>
Any ideas? I get the general idea that nothing is telling the TextBox that it's width is constrained so no TextWrapping is invoked, but I'm at a loss as to how to tel the TextBox that there is a width constraint. I've seen all sorts of posts about not using "Auto" and using "*" but nothing seems to work!
Looking ahead, I'm not really happy with how this looks period. I'm currently getting a line drawn around every note item which I don't like. Also, I'd like the textbox where you enter the new note to look like part of the listbox and appear at the bottom.
Thanks,
Dave
I'm having massive issues with the WPF ribbon. Here's a bit of Ribbon code. (I'm using System.Windows.Controls.Ribbon), all of this inside a RibbonWindow on .NET 4.5/VS2012.
<Ribbon VerticalAlignment="Top" Height="Auto" HorizontalAlignment="Stretch">
<RibbonTab Header="Home" Height="Auto" VerticalAlignment="Top">
<RibbonGroup Header="Save/Load" Height="Auto" Margin="0"
VerticalAlignment="Top" Width="Auto">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="cmdLoadImage" Click="cmdLoadImage_Click"
Margin="10,10,10,10" Grid.Column="0">
<Image Source="Images\load-icon.png" />
</Button>
</RibbonGroup>
</RibbonTab>
</Ribbon>
Point 1-2 are bugs.
I can't change the height of the Ribbon, despite changing the VerticalAlignment properties of the RibbonTab and RibbonGroup to Stretch. The visual height remains the same.
Changing the Button to a RibbonButton vanishes the image inside it, while keeping it at Button has visual repercussions.
How do I make the Ribbon span the window as in MS Office? The ApplicationMenu going to the top, and so on?
Edit: A free, alternate ribbon control library for WPF will be appreciated. I want to use it commercially.
For the first question: sorry to disappoint you Microsoft Ribbon have fixed height so you cant change it.
As for the second question: you should use LargeImageSource and SmallImageSource instead of put the image into RibboButton.
Your third question is not obvious enough, But if you mean that you want to join the ApplicationMenu to window title this is the answer: you have to change your window type to RibbonWindow:
<RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</RibbonWindow>
and in window code behind:
public partial class MainWindow : RibbonWindow
{
}
your design have some mistakes lets fix it.
first of all you have to put the ribbon in grid:
<RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ribbon Focusable="False" Height="138" Name="MainRibbon"
VerticalAlignment="Top">
<RibbonTab Header="Home" IsSelected="True" KeyTip="H">
<RibbonGroup Header="Tools" KeyTip="T">
<RibbonButton Click="btnSave_Click" ToolTipTitle=""
ToolTipDescription="" Name="btnSave"
LargeImageSource="..\..\Images\RibbonIcons\Save.png"
Label="Save" KeyTip="S"/>
</RibbonGroup>
</RibbonTab>
</Ribbon>
</Grid>
</RibbonWindow>
Note: you have to set LargeImageSource property To appear the RibbonButton correctly.
Good luck.
I have an ItemsControl:
<Border Grid.Row="1" Margin="20" BorderBrush="AliceBlue" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ItemsControl Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding SelectedEventHistoryEntryCollection}" ItemTemplateSelector="{StaticResource computerEventHistoryDataTemplateSelector}"/>
</Border>
With some datatemplates. I'm testing the first template:
<DataTemplate x:Key="DetailsDataTemplate">
<Grid>
<Label Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_ServiceDept}"/>
<TextBox Margin="110,0,0,0" Width="200" IsReadOnly="True" Text="{Binding ServiceDepartment}" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label Width="150" Margin="0,40,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_SLA}"/>
<TextBox Margin="110,40,0,0" Width="200" IsReadOnly="True" Text="{Binding SLA}" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label Width="150" Margin="0,80,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{x:Static resx:Resources.Label_Details}"/>
<TextBox Margin="110,80,10,10" IsReadOnly="True" TextWrapping="Wrap" Text="{Binding Details}"/>
</Grid>
</DataTemplate>
I would like the last Textbox in the datatemplate to use up the remaining space, but nothing I tried works. How can I get this uncooperateive TextBox to stretch?
Edit: Removed the Height Property on the Textbox.
Change the grid to a DockPanel with LastChildFill="true".
You can then get rid of all of the Margins and let WPF do the layout automatically.
Use a <DockPanel> instead of a <Grid>.
The last item in the DockPanel uses remaining space.
Generally, I use <Grid.RowDefinitions> and <Grid.ColumnDefinitions> in conjunction with star sizing * instead of margins for this type of layout.
UPDATE 1: (Removed for clarity)
UPDATE 2: When I wind up in situations like this where I can’t figure out where to apply a binding or a template I try to back up and look at the problem differently. I almost always take it back to the MVVM pattern. In this case, your Model is your EventHistory object. Your ViewModel has an ObservableCollection<EventHistory>. And your View is simply binding to that collection. So, to get something like this:
You would use something like this for your View:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8" />
<RowDefinition Height="1.5*" />
</Grid.RowDefinitions>
<DataGrid Grid.Row="0" AutoGenerateColumns="True"
ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True"
HorizontalGridLinesBrush="DarkGray" VerticalGridLinesBrush="DarkGray" />
<GridSplitter Grid.Row="1"
Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Border Grid.Row="2" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3" Padding="8">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Status" />
<TextBox Grid.Row="0" Grid.Column="1" Margin="0,0,0,8" Text="{Binding Path=Status}" />
<Label Grid.Row="1" Grid.Column="0" Content="Detailed Description" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}" />
</Grid>
</Border>
</Grid>
And that is just fine -- because that is what you are trying to achieve. The bindings on the 2 labels and textboxes at the bottom of the screen don’t have to be part of any data template. They are part of the view (everything inside the red border in the screenshot). All of the resizing works and everything is good. If you really want to move things into a DataTemplate, it is probably possible, but this seemed more natural at this point.
NOTE: After creating the View (area inside the red border) I hosted it in the main window leaving an area to the right as per your screenshot. I also took a few liberties with a grid splitter, star resizing and margins so things would take up all of the available space while maintaining the pictured proportions.
Hopefully that helps!
I was a little slow on the uptake with my first answer. After realizing what you were after I don't think that approach was correct. Also, I don't think you can easily achieve what you're after using DataTemplates. However, I do think you have a few options:
Check into Prism since is is good at doing things like building composite applications. However, it seems like WAY overkill for this problem. So, a more direct approach may be...
Build out custom controls for each separate detail view you have and then write some custom logic to load each view as needed. You would set it up like this...
You main grid and your details view host (i.e. the ContentControl) would be set up something like this:
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="8" />
<RowDefinition Height="1.5*" />
</Grid.RowDefinitions>
<DataGrid Grid.Row="0" />
<GridSplitter Grid.Row="1" Background="Transparent"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Border Grid.Row="2" BorderBrush="DarkGray" BorderThickness="1" CornerRadius="3" Padding="8">
<ContentControl Grid.Row="2" x:Name="myContent" />
</Border>
</Grid>
And each of your custom controls for your individual detail views would be set up something like this:
<UserControl x:Class="WpfApplication1.CustomUserControl"
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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Status" />
<Label Grid.Row="1" Grid.Column="0" Content="Description" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Status}" />
<TextBox Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Description}" />
</Grid>
</UserControl>
At run time a row is selected in your DataGrid, you would have to load the correct user control with some code like this:
myContent.Content = new CustomUserControl();
Each of your custom controls would have to use star sizing, etc. to get the layouts to look right - which is what you were after with your question. Obviously there is still a lot of wireup that would need to be done.
That should give you what you are after. Sorry for the run-around on the first answer!
I don't know why but for some reason I am not able to refer to my tbText control in my code behind file. Here is the XAML part:
<ComboBox.ItemTemplate>
<DataTemplate>
<ItemsControl x:Name="ic">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
**<TextBlock x:Name="tbText" Grid.Column="0" Grid.Row="0" Margin="10" />**
<Image Grid.Column="1" Margin="10" Grid.Row="0" Width="100" Height="100" Stretch="Fill">
</Image>
</ItemsControl>
</DataTemplate>
</ComboBox.ItemTemplate>
I cannot refer to the "tbText" control.
You can't refer to it because it is inside an Items control.
You'd have to search the ItemsControl children in order to find the textbox.
See Finding control within wpf items control for ways to do this.