I want to add two TextBlocks in one column of my WPF project. I use the following codes but They locate on eachother now. How may I insert them after each other (not on each other)? Please note that I don't want to put them in two seperate columns.
<TextBlock Grid.Row="6" Grid.Column="1" x:Name="FirstName" Margin="10,10,0,0"/>
<TextBlock Grid.Row="6" Grid.Column="1" x:Name="LastName" Margin="10,10,0,0" Grid.ColumnSpan="2"/>
You can use a WrapPanel to host the TextBlocks horizontally:
<WrapPanel Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2">
<TextBlock x:Name="FirstName" Margin="10,10,0,0" Text="FirstName" />
<TextBlock x:Name="LastName" Margin="10,10,0,0" Text="LastName" />
</WrapPanel>
Related
I am trying to design a layout for a custom control for a project I am working on and got it looking the way I would like it to look, the problem is that from functional point of view I don't believe it is going to work for what I really need it to do. The following can be dropped into a Window to get the look I am going for.
<Window x:Class="TestProject.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:TestProject"
mc:Ignorable="d"
Title="MainWindow" Height="1080" Width="1920">
<StackPanel Margin="15,80,1535.333,85.667">
<Border BorderBrush="#FFD9D9D9" BorderThickness="0,1.5,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.ColumnSpan="3" Background="#FFF1F1F1">
</StackPanel>
<StackPanel Grid.Column="1" Margin="0,1,20,3" VerticalAlignment="Center">
<TextBlock FontSize="18" FontWeight="SemiBold">Header</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Margin="0,1,10,3" VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Right" FontWeight="SemiBold" FontSize="18">$125,400.00</TextBlock>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$0.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$125,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$1,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>
</Grid>
</Border>
</StackPanel>
</Window>
Now the issue I am struggling with is turning this is a template, that can be used with a binding, and I was thinking that I should maybe have gone with a listview and Grid View for the column headers. So any advice would be appreciated here as well.
The above has a few things I can see as an issue, mainly that I would need to click on each item row that will then run some code, and that is why I feel that I should have gone with a Grid View option instead. But the one reason I didn't go with the Grid View, was mainly because I could see no way to do the same layout here, with the columns.
So to recap
Should I have gone with a Grid View, if so how can I get the same results with the scaling of the middle column?
Best way to go about learning to turn this into a custom control, that I can style. Mainly looking for an explanation, resources to learn from.
Edit:
For those following or interested, the part I am struggling with is the following section. How would I do this from data binding, and get the template to be controlled to look this way? I understand the binding part, it's the actual template to control the data in the same way as the following code demonstrates.
<StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,20,2">
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
<TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2,10,2">
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$0.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$125,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$1,000.00</TextBlock>
<TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
</StackPanel>
The reason to use a custom control is because you want to re-template it entirely for theming. They are more complicated than usercontrols or templating and if you don't need theming functionality then a usercontrol or template would be the way to go.
It does look like a listview would do what you're looking for.
You would want a row viewmodel which exposed a brush to bind foreground of the second column to.
And that column would look something like:
ForeBrush being a public solidcolorbrush.
Brushes are arguably a view responsibility so you could use an enum or some such instead. And a converter to translate that into a brush.
The whole of that markup could then be turned into a datatemplate and your data into a viewmodel. Use type of that viewmodel to template it into the ui via the datatype matching your viewmodel.
<DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<ListView>
.....
Or you could put it in a UserControl
<DataTemplate DataType="{x:Type local:CostingsListViewModel}"
<local:CostingsListView/>
Please take a look at this picture:
I try to create same label with 2 sizes:
<Grid>
<Label Content="11" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50" />
<Label Content="%" HorizontalAlignment="Right" FontSize="20"
VerticalAlignment="Top"/>
</Grid>
But currently this is not like the picture:
To have such a result, your grid must be really small. I see at least 3 solutions to your issue:
1- Make your grid a bit bigger until it fits.
2- Put 2 columns in your grid, you'd put the number on the left column and the % on the right columns.
3- You could use a StackPanel like this:
<Grid>
<StackPanel Orientation="Horizontal">
<Label Content="11" FontSize="50" Padding="0"/>
<Label Content="%" FontSize="20" VerticalAlignment="Top" Padding="0,10,5,5"/>
</StackPanel>
</Grid>
EDIT:
<Grid>
<StackPanel Orientation="Veritical">
<StackPanel Orientation="Horizontal">
<Label Content="11" FontSize="50" Padding="0"/>
<Label Content="%" FontSize="20" VerticalAlignment="Top" Padding="0,10,5,5"/>
</StackPanel>
<Label Content="Storage">
</StackPanel>
</Grid>
I have a Silverlight page that is using MVVM. on the page I have several controls that I need to validate. for dropdowns and text boxes it is not so hard. i.e.
<TextBox Grid.Row="4" Grid.Column="1" Text="{Binding EmailAddress, Mode=TwoWay, ValidatesOnNotifyDataErrors=True}">
<i:Interaction.Behaviors>
<behaviors:UpdateOnTextChangedBehavior />
</i:Interaction.Behaviors>
</TextBox>
and I get the nice little red box with my message that I bound in the model.
but I also have a place were I have two check boxes in a stackpanel. I need to make sure one of the boxes is check. and I would like the error message to show up ether next to the stackpanal or the labeltextbox that is the 1st item in the stackpanal.
<StackPanel Grid.Row="6"
Grid.ColumnSpan="2">
<ac:LabelTextBox Content="Business Group(s):" />
<CheckBox HorizontalAlignment="Left"
VerticalAlignment="Center"
IsThreeState="False"
Content="XXX"
IsChecked="{Binding User.HasXXXUserRole, Mode=TwoWay, ValidatesOnExceptions=True}"
Margin="3"
FlowDirection="LeftToRight">
</CheckBox>
<CheckBox HorizontalAlignment="Left"
VerticalAlignment="Center"
IsThreeState="False"
Content="YYY"
IsChecked="{Binding User.HasYYYUserRole, Mode=TwoWay, ValidatesOnExceptions=True}"
Margin="3"
FlowDirection="LeftToRight" />
</StackPanel>
Thanks
Danny
This is my original code:
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<ProgressBar Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<TextBlock Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</StackPanel>
The progressbar was very small, maybe 2 or 3 pixels wide, then there was the text block and empty space after. So I tried explicitly docking the elements to sides:
<DockPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<ProgressBar DockPanel.Dock="Left" Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" />
<TextBlock DockPanel.Dock="Right" Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</DockPanel>
No avail. I also tried modifying each solution by setting HorizontalAlignment="Stretch" on the progress bar, but there's no change. How do i stretch it to fill all the space there is after the text block has been rendered?
Remove DockPanel.Dock="Left" from the ProgressBar and switch the order of the controls:
<DockPanel>
<TextBlock DockPanel.Dock="Right" Height="23" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<ProgressBar Height="23" VerticalAlignment="Top" />
</DockPanel>
By default, DockPanel has its property LastChildFill set to true, which will make the ProgressBar take the available space.
ahh I see what you're trying to do. This is probably a better place to use a grid with 2 column definitions. The first(the left one) columndefinition with Width="*" and the second(the right one) with a width set to Width="Auto". For more info about auto vs * see http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9a7e6591-1fae-4295-b68a-be97e8e53d06/
I am binding a TextBLock with a string Property but whenever this Property contains the text "Audit", the actual text displayed on the UI is "Audi". For any other scenario, this works fine.
I am using .Net 4.0 and OS is win XP.
I am not sure if this is a bug but I can't get rid of this. If it is a bug, where do I report WPF bugs? Can anyone else also reproduce this issue? If yes, is there a workaround?
Edit: The Binding for the textblock is:
<TextBlock Padding="0,5,5,5" TextWrapping="Wrap" Text="{Binding TaskRoleMapping}" FontWeight="Bold" Foreground="White" FontFamily="Segoe UI" Margin="3,0,0,0" VerticalAlignment="Center"/>
I am sure it's not a problem with the textlength as much bigger text gets displayed alright.
Edit: The TextBlock is contained in a StackPanel
<StackPanel Height="40" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Width="Auto">
<ContentControl Content="ContentControl" Template="{DynamicResource vector_Summary}" Height="16"/>
<TextBlock Padding="5,5,0,5" Height="28"
Text="{Binding Path=[LABEL.MAIN.HEADER], Source={x:Static Util:Util.labelDictionary}}"
FontFamily="Segoe UI" FontSize="12"
Foreground="#FFFFFF" Margin="1,7,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="Auto"/>
<TextBlock Padding="0,5,5,5" TextWrapping="Wrap" Text="{Binding TaskRoleMapping}" FontWeight="Bold" Foreground="White" FontFamily="Arial" Margin="3,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
I like Kent Boogaart's comment/points. Basically 't' char is being cut off/out from the view. So change the font size to smaller, or remove "Bold" or introduce min size of the TextBlock, or it's parent and 't' in "Audi" will magically appear