This is my first question here :)
I'm not a professional programmer, I'm only 18 and I haven't studied at university or anything, so please don't hate me if I say something stupid :p
I'm making (or rather trying to make...) an app for Windows 10 UWP and a piece of my xaml code looks like this:
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="12"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="12"/>
</Grid.RowDefinitions>
<Rectangle Margin="0" Grid.Row="1" Fill="White" RadiusX="7" RadiusY="7"/>
<Grid Grid.Row="1" Margin="12,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel>
<TextBox x:Name="textProduct" Margin="0,6,6,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Produkt..." BorderThickness="1"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBox x:Name="textAdditionalInfo" Margin="6,6,0,6" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="#FFCECED2" FontFamily="Segoe UI Light" FontSize="17" PlaceholderText="Dodatkowe info..." BorderThickness="1"/>
</StackPanel>
</Grid>
I also have an app bar at the bottom with Add and Delete buttons. I'd like to be able to dynamically add another line of TextBoxes to both StackPanels every time the user presses the Add button and Delete one every time they hit the Delete button. Unfortunetely I have no idea how to achieve this. I've tried to find an answer and I think this can be done by using UserControl, however I have no idea how to implement this.
I hope it's not too comlicated to do, because I don't want to seeem like a person that asks other people to do all my work for me...
If it's a big problem, then it doesn't even need to support deleting the TextBoxes.
I hope you understand what I mean. I'm not native english so sorry for any mistakes ;)
Welcome to XAML, it's well worth the time learning it!
For displaying data XAML has something smart called DataBinding. The general concept is you bind a List (for example all strings you want to display in your StackPanel) to an element in the view. Now whenever you modify that list, the view automatically adapts. StackPanel does not support Binding, but for example ListView does (as seen below)
How about you take a look at this for basic informations about databinding: https://blogs.msdn.microsoft.com/jerrynixon/2012/10/12/xaml-binding-basics-101/
With this in mind, you can do something like this:
<!-- insert at the top -->
<Page.Resources>
<DataTemplate x:Name="MyDataTemplate">
<TextBlock Text="{Binding } />
</DataTemplate>
</Page.Resources>
<!-- insert where you want the list to appear -->
<ListView x:Name="ListView" ItemTemplate="{StaticResource MyDataTemplate}" ItemsSource="{Binding MyCollection}" />
The only hard part for you will be to bind the list to the ListView, but I'm sure you can do it with the tutorial from above ;)
Alernatively, you can name your StackPanel with x:Key="MyStack", and add the items manually:
MyStack.Children.Add(new TextBlock() {Text = "myText"});
However, I can really recommend you to do the DataBinding approach, as it makes interacting with the UI so much easier in bigger projects.
Related
So I have got C# 5.0 All-In-One for Dummies, but it doesn't really show a good example for what I want to achieve. Here is my XAML:
<StackPanel Grid.Column="1">
<Grid>
<Image Source="Images/039.JPG" x:Name="example_image"/>
<Image Source="Images/example.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Panel.ZIndex="999" x:Name="example_logo"/>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Slider Grid.Column="0" Margin="10" Maximum="100" SmallChange="1" ToolTip="Watermark size in percent (%)" Value="{Binding Path=SliderValue, Source={x:Static Application.Current}}"/>
<TextBlock Grid.Column="1" Text="{Binding Path=SliderValue, Source={x:Static Application.Current}}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</StackPanel>
So I have got 2 images, one image 1 (the watermark) on top of the other image 2. And I have got a slider, which I have Binded to a value in my App.xaml.cs.
What I need to do is code a custom command, which will fire when the slider is moved, I need to add some parameters to this command which will be the 2 images names, so I can manipulate these controls using the command.
I can't seem to workout how I would do this, I have made a separate file for my commands called Commands.cs.
Why do I want to send the 2 images names as parameters, well so the command is reusable, if I want to use a different image control.
How would I go about doing this?
There isn't a Command property on the Slider although it's possible to add one (see https://gist.github.com/anonymous/4326429)
A simple option would be to handle the ValueChanged event on the Slider or perhaps if the SliderValue property on App.xaml.cs is a then you could fire your reusable "command" code from its setter.
Side note, you may want to look into the MVVM pattern rather than putting all your code in the code behind.
This doesn't actually describe what I mean, but I'll try to explain. I've been using C# for an year now and never touched WPF. Only recently I've realized how awesome it is and started using it. I'm now facing a problem.
I want to let the user know the password/username are incorrect, so instead of the old WinForms MessageBox I want to make it more pleasent. I thought about creating a grid that tints the application darker, and then I'll be able to show some text on it. However - how's that possible?... Do you have any nicer ideas to show a message for the application (not a popup)? Thanks.
You can create an UserControl with translucent background (like #33000000), and 3-row grid to show title, message and OK button, like bellow:
<UserControl x:Class="ApplicationNameSpace.MessageControl" ... >
<Grid Background="#33000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFFFFF" MinHeight="100" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#EEEEEE">
<Label Content="Unable to Login" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Row="1" Margin="10,20">
<TextBlock Text="Wrong username or password. Try again." HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Grid Grid.Row="2" Background="#EEEEEE">
<Button Content="OK" Width="80" Height="25" />
</Grid>
</Grid>
</Grid>
</UserControl>
To use, you can add the control at the end of your window, and change the visibility to Visible when needs to show it.
<Window x:Class="ApplicationNameSpace.MainWindow"
xmlns:local="clr-namespace:ApplicationNameSpace" ... >
<Grid>
...
<local:MessageControl Name="messageControl" Visibility="Collapsed" />
</Grid>
</Window>
You can also create a generic control that you pass to a show method the title and message content, like MessageBox show method. You can also add the user control element programmatically in the window in this method.
You can use the validation and the INotifyDataError which is on WPF 4.5 and you can show a nice message next to the textbox check this link for example
I'm starting to try to create a modern app with C# and XAML. I've already worked with C# but I never touched in a XAML or WPF piece of code, so I've a beginner question..
I'm using a MSFT template Hub App (XAML) but I don't know how can I set the text value on a TextBlock through the C# code if that textblock is inside the datatemplate.
Is there somebody who can help me with this one?
I already googled for it but I can't get any site with that answer/explanation.
This is an example about what I'm trying to do:
XAML:
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="Assets/MediumGray.png" Stretch="Fill" Width="420" Height="280"/>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
x:Uid="Section1Subtitle" Text="{Binding Score}"/>
<TextBlock x:Name="desc" Grid.Row="2" Margin="0,10,0,0"
x:Uid="DescriptionHeader" Text="{Binding Test}"/>
<TextBlock x:Name="texttest" Grid.Row="3"
Text="{Binding Name}"/>
</Grid>
</DataTemplate>
C# code:
public class Class1
{
string name = "This is a test";
public string Name
{
get { return name; }
set { name = value; }
}
}
What am I doing wrong here?
Thanks in advance,
Problem solved.
Thanks a lot for you help.
Here is the code with the changed which allow me to get the variable from C#:
<DataTemplate>
<Grid>
<Grid.DataContext>
<local:Class1/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="Assets/MediumGray.png" Stretch="Fill" Width="420" Height="280"/>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
x:Uid="Section1Subtitle" Text="{Binding Score}"/>
<TextBlock x:Name="desc" Grid.Row="2" Margin="0,10,0,0"
x:Uid="DescriptionHeader" Text="{Binding Test}"/>
<TextBlock x:Name="texttest" Grid.Row="3"
Text="{Binding Name}"/>
</Grid>
</DataTemplate>
This one will also walks you through many aspects of the WP development, including using devices, live tiles, etc:
http://www.jeffblankenburg.com/2011/10/31/31-days-of-mango/
It's a bit old though.
Usually there is no way to set something inside of a DataTemplate easily in c# code. However, there are some messy ways to do it through binding, converters, and selectors.
XAML provides a simple and powerful way to auto-update data between the
business model and the user interface. This mechanism is called
DataBinding. Everytime when the data of your business model changes,
it automatically reflects the updates to the user interface and vice
versa. This is the preferred method in WPF to bring data to the user
interface.
Databinding can be unidirectional (source -> target or target <-
source), or bidirectional (source <-> target).
try out the link Learn XAML.
In abstraction, a DataTemplate is a Visual representation of a certain piece of Data.
UI elements inside a DataTemplate should reflect the state of such piece of data.
In XAML-based technologies, DataBinding helps in keeping the UI in sync with the data, using really clean and beautiful declarative means, as opposed to traditional procedural programming.
So, say you have a certain piece of data, like:
public class Person
{
public string FirstName {get;set;}
public string LastName {get;set;}
}
Then you may have a DataTemplate which represents that data, like:
<DataTemplate DataType="local:Person">
<StackPanel>
<TextBlock Text="{Binding LastName}"/>
<TextBlock Text="{Binding FirstName}"/>
</StackPanel>
</DataTemplate>
The key is in the {Binding} declarations.
See the above linked MSDN article for more information.
I would like to make TabControl that contains TabItems. Within the TabItem, I would have StackPanel that contains various controls (ListBox, TextBox, Grid, etc). How do I make template of each TabItem and make multiple of them?
For example lets say I would like to make TabControl that contains tabs for Food category (Meat, Fruit, Vege, etc). I could make them individually by making TabItems with Name and Header. But instead I would like to just make one like following and use it as template as tab could increase.
<TabControl x:Name="TabControl" Margin="3,3,3,3" MinWidth="200">
<TabItem Name="FoodCategory1">
<!-- Contents of this does not really matter but its same thing for each "FoodCategory" -->
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="20"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox x:Name="InputBox" Grid.Column="0" Margin="5,5,5,5"></TextBox>
<Button x:Name="AddButton" Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,5,0" Width="20" Height="20"></Button>
<Button x:Name="RemoveButton" Grid.Column="2" HorizontalAlignment="Right" Margin="0,0,5,0" Width="20" Height="20"></Button>
</Grid>
<ListBox x:Name="FoodList" Margin="3,3,3,3" MinHeight="40"></ListBox>
</StackPanel>
<!-- example end -->
</TabItem>
</TabControl>
And of course from my code back I would like to access each individual tabitems content by FoodCategoryX.InputBox and so forth.
How should I approach this?
Any help would be appreciated.
Thank you.
Based upon what you wrote, you would write either a UserControl or CustomControl that acts as a container and provides the visual effects you are after. The simplest of these two is probably a UserControl. You would then populate each of your TabItems with an instance of your control and that enables your need to address the TabItems by name.
For your other question about addressing the various child controls by name, this is achievable, but a more robust approach would be to employ WPF's binding features by exposing dependency properties. Writing a UserControl is straight-forward effort and there's a working sample here
I want to develope my first real WPF Desktop Application. It's quite a lot of time since my last desktop application, which was developed with .NET 2.0 and Windows Forms. Since i have to develope a new Desktop Application, and i can take the advantage of .NET 4.0 i would really like to use WPF.
I am reading some online tutorial and documentation to choose the right way to do it, but i am a little lost with the new controls.
Basically i need a panel which show some textboxes and label above a datagrid.
Do you think that i can achieve such a result with gridpanel control ?
Thank you.
In WPF you usually use several different controls. Control composition in WPF is a major feature and you'll gain a lot by knowing it and taking advantage of it.
When looking at your screen i divide it in two major parts:
- campi di ricerca
- resultati
For these two i'd use a Grid with two rows and one column.
The ricerca area could use a DockPanel with the header aligned at the top and aother Grid With Fill contents.
... and so on, so on.
My best advice is for you to learn about WPF Composition
Hope i've helped a little bit
Yes, you need to use a Grid, with multiple rows and columns.
See the example on 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>