WPF & XAML problem - wpf

Im new in WPF & Xaml
I dont know how to anchor how to dock...
On this screen gray is statusBar is docked but grid and menu is not all components are in canvas.
This is XAML
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication6.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Canvas>
<StackPanel Height="40" Width="624" VerticalAlignment="Top" HorizontalAlignment="Center">
<Menu Height="39" Margin="1,0,0,0">
<Menu.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF6F6F6" Offset="0.25"/>
<GradientStop Color="#FFEAE8E8" Offset="0.25"/>
<GradientStop Color="#FFDCD9D9" Offset="0.8"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
</StackPanel>
<StackPanel Height="356" Canvas.Top="44" Width="161" HorizontalAlignment="Left">
<Expander Header="Expander" Height="107">
<Grid Background="#FFE5E5E5"/>
</Expander>
</StackPanel>
<StackPanel Height="360" Canvas.Left="161" Canvas.Top="40" Width="463">
<DataGrid Height="361"/>
</StackPanel>
</Canvas>
<StackPanel Height="40" Margin="-1,0,0,0" VerticalAlignment="Bottom">
<StatusBar Height="40" Background="#FF897676"/>
</StackPanel>
</Grid>

You don't want these things to go in a Canvas. I'm not sure I've ever used a Canvas in WPF.
DockPanel is your friend, and this is how it works:
Each control in the DockPanel gets a DockPanel.Dock attached property : Left, Top, Right, or Bottom
What, no Fill? This is important: You can have one control fill up available space, and that will be the last control declared in the DockPanel. So, even if you want the "fill" control to be at the very top, you make it the last item in the DockPanel and set DockPanel.Dock="Top".
Other than the last, "fill" item, others which have the same dock setting will be docked in the order in which they were declared.
At its most basic, DockPanel can be used just like StackPanel except it will fill available space.

Related

VB.net WPF textblock

can you please help me.
Im new in WPF and trying absolutely simple code. Have form with open save dialog. Path to a file im fill to a textblock and this string i need use in other module.
Without WPF i know how i can use it
frm_main.txt_path.text
But i cannot find this in WPF. This is my form. And i need use txt_path textblock
<Window x:Class="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:SCM_TO_BIESSE"
mc:Ignorable="d"
Title="Conversion SCM XXL code to Biesse XNC" Height="413.059" Width="647.202">
<Grid x:Name="frm_main" Margin="1,1,1,1.2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="194*"/>
<ColumnDefinition Width="445*"/>
</Grid.ColumnDefinitions>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF4396E4" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock x:Name="txt_path" HorizontalAlignment="Left" Margin="68,196,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="48" Width="285" Grid.ColumnSpan="3" Foreground="#FF6B5050">
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF897F7F" Offset="0"/>
<GradientStop Color="#FFFAFAFA" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
<Button x:Name="btn_open" Content="Select file for conversion" HorizontalAlignment="Left" Margin="211.4,196,0,0" VerticalAlignment="Top" Width="160" Height="48" Grid.Column="2" RenderTransformOrigin="0.377,-0.663"/>
<Image Grid.Column="1" Margin="1,1,317.4,295" Source="new.jpg" Stretch="Fill" Grid.ColumnSpan="2"/>
<Button x:Name="btn_open_Copy" Content="Start Conversion" HorizontalAlignment="Left" Margin="65.4,304,0,29" Width="160" Grid.Column="2" RenderTransformOrigin="0.377,-0.663"/>
</Grid>
</Window>
Thanks very much for a help .
Marek
WPF is predicated (based, built) on binding to achieve a separation of concerns. You can do things the same way as WinForms but it isn't advised.
First (as mentioned in a comment) you need to use a TextBox, not a TextBlock. You haven't bound your TextBox to an underlying property (note that I've simplified this):
<TextBox x:Name="txt_path"
Text="{Binding YourTextProperty}"
Height="48" Width="285"
>
</TextBox>
</Grid>
You then have a public get/set string property called YourTextProperty on your viewmodel - then anything populated in to that TextBox will get automatically propagated to the underlying property (and vice versa - if you've correctly implemented INPC then any value populated into the property will get reflected in the textbox).

Drunk Silverlight - solid background colors for a button background shows it with gradient effect

VS2012 >> New Silverlight project >>
<UserControl x:Class="SilverlightApplication2.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" >
<Button Background="Red" />
</Grid>
</UserControl>
The silverlight button default template has change somehow.. how i reset and restore to default?
WPF buttons background works fine
only buttons issue , for now other controls doesn't have this problem
Like #Alex says, the gradient is a result of the Template used by the Button. No matter what color you set the background to, it's going to show the gradient.
One way to change this is by modifying the template as #Alex suggested.
Another way is to set the Content of the Button to a Grid, and then set the Grid to whatever solid color you want.
<Button Height="100" Click="OnClick" Width="100">
<Button.Content>
<Grid Height="100" Width="100" IsHitTestVisible="False" Background="Blue"/>
</Button.Content>
</Button>
This all depends on the template of the button. I'm guessing the default template has some layers on top that simulate translucent shading or something like that. Replace the control template with a simpler one and it should work. You can find the default templates on MSDN, you can just modify the button one instead of starting from scratch: http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx
Specifically I'm guessing this part is the gradient:
<Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>

working with fontstretch in wpf

I want to learn how to utilize fontstretch in my wpf applications.
I've created this simple usercontrol, a border with rounded corners which has a textblock. I want to stretch the text of the textblock to fill my border. I want to avoid the use of the viewbox control to do this.
this is my usercontrol xaml
<UserControl x:Class="DisplayObject"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Background="Transparent">
<UserControl.Resources>
<LinearGradientBrush x:Key="BackGroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="AntiqueWhite" Offset="0"/>
<GradientStop Color="White" Offset="0.45" />
<GradientStop Color="Silver" Offset="1" />
</LinearGradientBrush>
</UserControl.Resources>
<Border x:Name="LayoutRoot" CornerRadius="12" Background="{StaticResource BackGroundBrush}" BorderBrush="Black" BorderThickness="2">
<TextBlock TextAlignment="Center" Text="{Binding Path=DisplayText}"
Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap" FontSize="12" FontFamily="Arial" FontStretch="UltraExpanded"/>
</Border>
</UserControl>
From what I gather from reading online the Arial font is an opentype so it supports stretching. I tried using horizontal/vertical alignment values of "Stretch" but this did not help. Not sure what I have done wrong but I figured someone on this site may be able to explain why its not stretching for me, and how to fix it.
Thanks for reading my post.
The Arial font does not seem to support the FontStretch value of UltraExpanded. Try the value of UltraCondensed instead to see it work:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center"
FontStretch="UltraCondensed" />
</Grid>
Look at the Why FontStretch does not work in WPF? post to find out an alternative to using this little used property.

Canvas Background color not showing

I created a UserControl to display a popup using a TextBlock within a Canvas. Everything seems to be working OK, except for the background color of the canvas. It is being rendered as transparent no matter what I try. I also tried adding a Rectangle and filling it but that isn't working either. Here's the code:
<UserControl 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:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
xmlns:System="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
x:Class="PopupText.CanvasPopup"
d:DesignWidth="456"
d:DesignHeight="129">
<StackPanel x:Name="LayoutRoot"
Orientation="Horizontal">
<!--This button toggles the visibility of the popup-->
<Button x:Name="ActivateButton"
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderThickness="0"
Click="OnActivateButtonClicked">
<Image Source="/pushpin.png"
Width="36"
Height="36"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Fill"
Margin="0" />
</Button>
<Canvas x:Name="PopupContainer"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="{Binding Width, ElementName=PopupText}"
Height="{Binding Height, ElementName=PopupText}"
Visibility="Collapsed">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#7FA79797"
Offset="1" />
</LinearGradientBrush>
</Canvas.Background>
<Rectangle Canvas.Left="0"
Canvas.Top="0"
RadiusX="20"
RadiusY="20"
Width="{Binding Width, ElementName=PopupText}"
Height="{Binding Height, ElementName=PopupText}">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#7F67749D"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#7FC89B9B"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<TextBlock x:Name="PopupText"
Text="A really long line of text that will either overflow or wrap"
TextWrapping="Wrap"
Width="350"
Canvas.Left="0"
Canvas.Top="0" />
</Canvas>
</StackPanel>
</UserControl>
Thanks for your help!
It looks like you want to bind the size of the Canvas to the actual size of the TextBlock not the values specified at design-time.
In that case, use a binding like this:
Width="{Binding ActualWidth, ElementName=PopupText}"
Height="{Binding ActualHeight, ElementName=PopupText}">
Your gradients appear to work if you set height manually. It would appear your height element binding isn't working as you expect it too.
I tested your Canvas in isolation with height 300, Rectangle height 200 and it didn't make much difference aesthetically what the height of the textblock was. Both the gradients worked fine, for the canvas and the rectangle.
You are binding the height property of the canvas and the rectangle to that of the textblock, but the textblock has an "auto" height property. XAML can't assign a height value to those elements for that reason. Try setting the height of the textblock manually rather than automatically. This will affect the other two elements right away.
P.S. If you remove Width="350" from the textblock, then the canvas and the rectangle will have 0 height and width on the stack panel. You need to set the height and width properties of the textblock manually since the other two elements depend on it.

Popup orientation is not correct. Its 90 degrees rotated

Hi
I have created a popup using Popup class in silverlight. I wrote a class of type UserControl and I added this usercontrol to the popup by using Child method of Popup class.
Following is the XAML code of my UserControl class
<UserControl x:Class="MyProject.PopupWindowContent"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" UseLayoutRounding="False" Cursor="Hand">
<Grid Height="355" Name="grid1" Width="527.5">
<Image Height="355" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="527" Source="/MyProject;component/dialog_bg.png" UseLayoutRounding="True" />
<Image Height="194" HorizontalAlignment="Left" Margin="13,87,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="502.5" Source="/MyProject;component/dialog_box_1.png" />
<Image Height="46" HorizontalAlignment="Left" Margin="25.25,35.25,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="49.75" Source="/MyProject;component/dialog_logo.png" />
<TextBlock Height="40" HorizontalAlignment="Left" Margin="153.25,38.75,0,0" Name="popupHeading" Text="TextBlock" VerticalAlignment="Top" Width="212" TextAlignment="Center" FontWeight="Bold" FontSize="26" />
<Button Content="Submit" Height="71" HorizontalAlignment="Left" Margin="130.75,265.75,0,0" Name="buttonOne" VerticalAlignment="Top" Width="132.25" BorderThickness="1" FontSize="18" Foreground="Black">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FF06EF06" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Button BorderThickness="1" Content="Cancel" FontSize="18" Foreground="Black" Height="71" HorizontalAlignment="Right" Margin="0,265.75,142,0" Name="buttonTwo" VerticalAlignment="Top" Width="132.25">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFEF0606" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<TextBox Height="162.75" HorizontalAlignment="Left" Margin="18,108.25,0,0" Name="popupBody" Text="TextBox" VerticalAlignment="Top" Width="480.5" Background="{x:Null}" FontSize="20" Foreground="White" BorderThickness="0" />
</Grid>
I set this PopupWindowContent to my popup using following code in my xaml file
Popup popUnWin = new Popup();
popUnWin.Child = new PopupWindowContent();
popUnWin.IsOpen = true;
Problem is that when I execute this code, popup orientation is according to portrait but my app is landscape. So popup looks 90 degrees rotated.
Can anyone please tell me how can i fix it?
Best Regards
I found that if you put the popup into the xaml code of the page, then the orientation is done properly.
Are you setting SupportedOrientation on every page of your app or just the first? I think there's a wierd thing that if you set it on your first page, some things will respect it, but others (like the popup) look at the supported orientations of the active page?
I've seen some suggestions of adding the popup to the visual tree. I tried adding it to my xaml and it still didn't rotate, but you might want to give it a shot.
Do not rotate the popup but place a border inside the popup and load the content in the border.
I got it to work like this:
//In .xaml
<Popup x:Name="myPopup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="480" />
</Grid.RowDefinitions>
<Border x:Name="popupBorder"/>
</Grid>
</Popup>
//In .xaml.cs
popupBorder.Child = new MyPopupPage(); //MyPopupPage is the "Windows Phone Landscape Page"
myPopup.IsOpen = true;

Resources