I'm completely new to XAML and WPF and I cannot add other type of control (like TextBox or Label) to grid after adding a button. Could you please explain me where do I make a mistake (I guess it should be some simple mistake by a newbie guy).
I've created an app in C# using Win Forms and decided to create the same app using WPF, which I never used before, so that I can learn something new. I'm not good in C# FYI. I started new project with WPF application in Visual Studio, created 2 columns and 4 rows for a grid and started adding some controls to it. Unfortunately, I cannot make a working app with buttons and another type of control on same grid. It looks like grid would allow me to add only 1 type of controls, which for me makes no sense and I couldn't find any information about such restriction. Simple XAML code included.
<Window x:Class="AjStock_WPF_3.CSVToSQL"
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:AjStock_WPF_3"
mc:Ignorable="d"
Title="CSVToSQL" Height="450" Width="800" MinHeight="200" MinWidth="250">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">
<Button.Name>GetCSVFile</Button.Name>
<Button.Content>Get CSV file</Button.Content>
<Button.Margin>10</Button.Margin>
<Button.VerticalContentAlignment>Center</Button.VerticalContentAlignment>
<Button.HorizontalContentAlignment>Center</Button.HorizontalContentAlignment>
<Button.FontWeight>Bold</Button.FontWeight>
<Button.FontSize>14</Button.FontSize>
<Button.BorderThickness>2</Button.BorderThickness>
</Button>
<TextBox Grid.Column="1" Grid.Row="0">
<TextBox.VerticalContentAlignment>Center</TextBox.VerticalContentAlignment>
<TextBox.HorizontalContentAlignment>Center</TextBox.HorizontalContentAlignment>
<TextBox.Margin>10</TextBox.Margin>
</TextBox>
</Grid>
Expected result would be a window with controls like this:
Button | TextBox
Label | TextBox
Button | TextBox
Button | Button
Error that I'm receiving:
CS0029 Cannot implicitly convert type
'System.Windows.Controls.TextBox' to
'System.Windows.Controls.Button' AjStock_WPF_3 D:\OneDrive\Microsoft
Visual
Studio\source\repos\AjStock_WPF_3\AjStock_WPF_3\obj\Debug\CSVToSQL.g.cs 104 Active
You need to remove
<Button.Name>GetCSVFile</Button.Name>
and replace with
<Button Grid.Column="0" Grid.Row="0" Name="GetCSVFile">
Not sure why this is required as when the textbox is removed, leaving just the button, it compiles. It's probably related to the mapping of x:Name but not 100% sure.
Related
How to customize the WindowChrome class while using MvvmCross?
I've got this:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
FontSize="32"
Text="SOME UPPER CASE TEXT THAT WILL NEVER BE DISPLAYED" />
</Grid>
inside my MvxWindow and the WindowStyle is set to none.
The problem is that MvxWindow doesn't seem to display anything. That means I can't create the buttons I need either. I don't know if MvvmCross expects every UI element to be part of a View or what else is going on. Resizing and even right-clicking the invisible border works just fine. Is there any way to do this without having to rebuild the entire WindowChrome functionality inside a View?
I will answer this myself;
while there is little difference in creating a custom WindowChrome with MvvmCross, I'll keep this question up in the hope that it could help someone else.
Not being able to display UI elements in MvxWindow is actually no problem at all. Just create the UI in your View and set the WindowChrome.IsHitTestVisibleInChrome property to true for each element you need.
There is basically no difference between doing this within a Window or a View. You just have to keep an eye on your CaptionHeight as your WindowChrome and your UI are now in two different scripts.
It could look like this:
Inside your MvxWindow:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
Inside the view displayed by that window:
<Menu Height="{x:Static SystemParameters.WindowCaptionHeight}">
<MenuItem Header="_Exit" WindowChrome.IsHitTestVisibleInChrome="True" />
</Menu>
I'm having a problem with determining which element is responsible for a size misalignment. Here is a picture to illustrate it: click here to see it
The light grey area is the element size which I am trying to change, but cannot. The overall area is a User Control, the area inside the Tab is a WPF (as an element Host). I've tried changing both, but with no effect on the grey area (the other tabs are also affected by this). Here is the code for the hosted element (WPF):
<UserControl x:Class="SlideAnalyzer.DisplayAnalysis"
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:SlideAnalyzer"
mc:Ignorable="d"
d:DesignHeight="150.8" d:DesignWidth="201.2">
<Grid Name="displayGrid" Height="64" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="160" Margin="10,0,31.6,9.4" RenderTransformOrigin="0.496,0.94">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander x:Name="expander" Grid.Row="0" Header="Titel zu lang" HorizontalAlignment="Left" VerticalAlignment="Top" Width="180" Background="Red" Margin="-10,-56,0,0">
<Grid Background="AliceBlue">
<TextBlock TextWrapping="Wrap"
Margin="5"><Run Text="This is some text content."/></TextBlock>
</Grid>
</Expander>
</Grid>
The host itself is a normal User Control. I cannot seem to get the right size of the hosted element so that the preview really reflects reality (because when I run the Add-In, the size of the WPF differs)
I tried changing the Properties of the UserControl and I found that AutoSize has a big impact when True (by default False)
Thanks!
I'm new to Windows 10 app development. I'm trying to embed my custom UserControl in a page in my application. For some reason, the content is being completely replaced by whatever I put inside it in the XAML page. To give a better explanation, here is the code:
AppView.xaml (the control)
<UserControl
x:Class="Sirloin.AppView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sirloin"
xmlns:h="using:Sirloin.Helpers">
<SplitView x:Name="splitView" DisplayMode="CompactOverlay">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--The hamburger-->
<Button Click="OnHamburgerClicked" Grid.Row="0" Style="{StaticResource MenuButtonStyle}">
<Button.DataContext>
<local:MenuItem Symbol=""/>
</Button.DataContext>
</Button>
<!--Buttons just below the hamburger-->
<ListView x:Name="topView"
Grid.Row="1"
ItemTemplate="{StaticResource ListViewItemTemplate}"/>
<!--Buttons toward the bottom of the menu-->
<ListView x:Name="bottomView"
Grid.Row="3"
ItemTemplate="{StaticResource ListViewItemTemplate}"/>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<!--Where I'd like the content specified in MainPage to appear-->
<Frame x:Name="frame" Background="White"/>
</SplitView.Content>
</SplitView>
</UserControl>
MainPage.xaml
<Page
x:Class="Sirloin.Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="using:Sirloin"
xmlns:local="using:Sirloin.Example">
<s:AppView>
<Grid Background="White">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello, world!"/>
</Grid>
</s:AppView>
</Page>
When MainPage renders in the VS designer, it's as if the contents of my user control have been completely gutted out and replaced with whatever is specified in the main page. To give you an idea, here is a screenshot of the designer:
As you can see, there is no menu or SplitView or whatever I've put in my custom control; the only thing that's present is the TextBlock I've specified in the XAML for MainPage.
Anyway, why does this happen and what can I do to fix it?
EDIT: Found the solution I was looking for here, but Peter Duniho's answer has been accepted as it provides a better explanation of what's going on.
UserControl is a subclass of Control (which is similar to WPF's ContentControl). It can have only one child. So you are explicitly overriding the content yourself. By specifying a child element for your AppView in the Page XAML, you are setting the content of the control. This takes precedence over whatever content was specified in the UserControl's own XAML.
Unfortunately, it's not very clear what it is you expected to happen. Maybe you want to provide a property for additional content, which the AppView class can use to add to its own content. Or maybe you should be allowing the client code to provide a DataTemplate and some kind of data item object (e.g. model class), which is used in a ContentPresenter or similar in the AppView XAML.
But whatever you're trying to do, you'll have to do it without using, and overriding the current value of, the implicit Content property of the UserControl in the Page XAML.
I am just wondering if it is possible to add hyperlink to WPF window title and if it is possible what is the best way of doing that.
I want to have title like that:
Program name, Version and that link to my site (e.g http://mysite.com)
This isn't supported out-of-the-box.
However, you can use Control Template to achive this or create an entire custom window of your own.
you can create a control template for your window. Something like that :
<Window.Template>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">
<Hyperlink NavigateUri="http://mysite.com">
My Program, version 1
</Hyperlink>
</TextBlock>
<!-- Implement your own control box control -->
<ContentPresenter />
</Grid>
</ControlTemplate>
</Window.Template>
You'll also have to set the window's Style to None as follows:
WindowStyle="None"
This will also mean that you'll have to implement your own controlBox with minimize, maximize and close buttons.
Check out this links for further information:
http://www.codeproject.com/Articles/140267/Create-Custom-Windows-in-WPF-with-Ease
http://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/
Good luck
What is the name of the control that is highlighted blue?
I want to make this:
(source: deviantart.net)
It would be helpful if you found some link to a library. I've searched using many different names (TaskButton/TaskPanel/StackPanel) but I'm really off.
Thanks.
Please note that the second image is only a concept sketch, and that it's not a real application.
This is most likely a custom (user) control which has been created by composing a number of standard WPF controls. It could easily be constructed in WPF using a horizontal StackPanel with various Image, TextBlock and Button elements as its content
I do not believe that the control you are pointing to is a .NET or WPF control. Most Windows 7 user interface elements are still native C/C++ resources.
That said, it is relatively easy to replicate that behavior using WPF 4.0, through a ListBox with a custom ItemTemplate. Take a look at this question to get you started.
It looks rather like a CommandLink control to me, something that first appeared in Vista. It's never been exposed as a control for use in Windows Forms or WPF, but this question contains information on how to make it available for your own use:
I suppose it is a WPF user control, created specifically for this application. It looks like it consists of a Image, some TextBox controls and a Button which in turn contains an Image.
I don't know how that control is called but my bet it is it's a custom windows form control, here's a link to get you started
I got it. You can do this with the help of a simple button in WPF.
You have to embed another button and those images to that button.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Button Height="38" Margin="12,49,83,0" Name="button1" VerticalAlignment="Top"></Button>
<Grid Height="32" Margin="113,48,80,0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="13*" />
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="12*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Button Margin="0,6,0,0" Name="button2" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="3" Grid.RowSpan="2">Button</Button>
<Button Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="17,6,3,0" Name="button3" Grid.Column="2">Button</Button>
</Grid>
</Grid>
</Window>