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>
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 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.
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.
Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.
Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.
It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.
I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.
An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.
So is there any way to do this?
Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander IsExpanded="True">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Height="50" Text="Hello" />
</Border>
</Expander>
<Expander Grid.Row="1" IsExpanded="True">
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock Height="50" Text="World" />
</Border>
</Expander>
</Grid>
regular tree view can do what you ask.
see this wonderful code-project explanation:
http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF
WPF Expander component do exactly what you want and it push down other control if hosted in a proper panel. Try using a StackPanel for example.
If I want to create a button control like that, is it supposed to be a User Control or a Custom Control? I am not sure maybe something else? Ideally I want to be able style/animate the main button and the inner button separately; also obviously Ill need to process their events separately. These buttons will be created at run-time and Ill need to set the icons dynamically.
I'd suggest a user control. You can still create your basic styling in xaml and use code for the dynamic stuff.
You'd basically have something like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="" Grid.Column="0" />
<TextBlock Grid.Column="1">Your button text</TextBlock>
<Image Source="" Grid.Column="2"/>
</Grid>
</Button>