I started doing the UI for an app in WinForm but I just read about WPF and I decided to re-do my work on it. But since is a new think I ran in a small problem:
As you can see in the screenshot bellow I have 3 vertical buttons that are centered on the main form. How can I achieve the same thing in WPF? I've tried any value I could find to change position but all of them failed.
Here is my main form XAML:
<Window x:Class="YouTubeMusicPlayerWpf.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:YouTubeMusicPlayerWpf"
xmlns:fa="http://schemas.fontawesome.io/icons/"
mc:Ignorable="d" Height="500" Width="900" Background="Black" WindowStyle="None" AllowsTransparency="true" WindowStartupLocation="CenterScreen" Name="mainWindow">
<WindowChrome.WindowChrome>
<WindowChrome ResizeBorderThickness="6" CornerRadius="0" GlassFrameThickness="0">
</WindowChrome>
</WindowChrome.WindowChrome>
<StackPanel Background="#FF201E2B">
<!-- TitleBar buttons -->
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<Button fa:Awesome.Content="WindowMinimize" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="minButton" Click="MinButton_OnClick"></Button>
<Button fa:Awesome.Content="WindowMaximize" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="maxButton" Click="MaxButton_OnClick"></Button>
<Button fa:Awesome.Content="WindowClose" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="closeButton" Click="CloseButton_OnClick"></Button>
</StackPanel>
</Grid>
<!-- Menu Buttons-->
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<StackPanel Orientation="Vertical">
<Button fa:Awesome.Content="Youtube" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<Button fa:Awesome.Content="Music" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
<Button fa:Awesome.Content="Download" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
</StackPanel>
</Grid>
</StackPanel>
</Window>
The problem is your root element. Replace the StackPanel by a grid and problem solved.
Bonus : if you are new to WPF, I show you how to refactorize your styles.
<Grid Background="Black">
<Grid.Resources>
<!-- Exemple of a style with a key to reuse -->
<Style x:Key="LeftButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="40" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Background" Value="#00000000" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Grid.Resources>
<!-- TitleBar buttons -->
<StackPanel
HorizontalAlignment="Right"
VerticalAlignment="Top"
Orientation="Horizontal">
<StackPanel.Resources>
<!-- Exemple of a implicit styles that will be set to each child with a matching type -->
<!-- Notice there is no x:Key -->
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</StackPanel.Resources>
<Button Content="b1" />
<Button Content="b2" />
<Button Content="b3" />
</StackPanel>
<!-- Menu Buttons -->
<StackPanel
HorizontalAlignment="Left"
VerticalAlignment="Center"
Orientation="Vertical">
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
</StackPanel>
</Grid>
Notice there is neither RowDefinitions nor ColumnDefinitions.
Here is how to do the same thing with place to set the content (a red box for exemple).
<Grid Background="Black">
<Grid.Resources>
<!-- Exemple of a style with a key to reuse -->
<Style x:Key="LeftButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="40" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Background" Value="#00000000" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!-- TitleBar buttons -->
<StackPanel
Grid.Column="1"
HorizontalAlignment="Right"
Orientation="Horizontal">
<StackPanel.Resources>
<!-- Exemple of a implicit styles that will be set to each child with a matching type -->
<!-- Notice there is no x:Key -->
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</StackPanel.Resources>
<Button Content="b1" />
<Button Content="b2" />
<Button Content="b3" />
</StackPanel>
<!-- Menu Buttons -->
<StackPanel
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Orientation="Vertical">
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
<Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
</StackPanel>
<Grid Background="Red" Grid.Row="1" Grid.Column="1"/>
</Grid>
Related
I have a Button which is defined through template:
<Button Name="DialogOk" Grid.Column="0" Margin="4,0,0,0" Content="{Binding OkButtonText}"
ToolTip="{Binding OkButtonShortcut}" Style="{DynamicResource ButtonOk}"
Click="DialogOk_Click" Visibility="{Binding DialogOkButtonVisibility}" />
The Style is defined in ResourceDictionary:
<Style x:Key="ButtonOk" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="ButtonBackground" Color="Red"/>
<TextBlock x:Name="ButtonText"
VerticalAlignment="Center" HorizontalAlignment="Center"
Text="{TemplateBinding Content}" />
<TextBlock x:Name="ButtonCustomToolTip"
Text="{TemplateBinding ToolTip}"
VerticalAlignment="Top" HorizontalAlignment="Right"
FontSize="10" Foreground="Yellow"
Visibility="{TemplateBinding ToolTip, Converter={StaticResource StringToVisibility}}">
<TextBlock.BitmapEffect>
<DropShadowBitmapEffect
ShadowDepth="1"
Softness="0"
Color="Black"
Opacity="0.4"
Direction="270"
/>
</TextBlock.BitmapEffect>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<!-- triggers there -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ButtonCustomToolTip is collapsed, when OkButtonShortcut string is empty.
But I still see the default tooltip like an empty white rectangle
when the cursor is over my button. How can I remove this default tooltip area?
This could be achieved with a style in the resources section of your parent style.
<Grid>
<Grid.Resources>
<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<Style.Resources>
<Style TargetType="ToolTip">
<Style.Triggers>
<!-- Add triggers for values you want to hide. -->
<Trigger Property="Content" Value=" ">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</Grid.Resources>
<StackPanel>
<!-- Tooltip not hidden -->
<Button Margin="10" Height="50" Width="100" Content="{Binding OkButtonText}"
Style="{DynamicResource ExampleButtonStyle}"
Visibility="{Binding DialogOkButtonVisibility}"
ToolTip="Hello">
</Button>
<!-- Tooltip hidden -->
<Button Margin="10" Height="50" Width="100" Content="{Binding OkButtonText}"
Style="{DynamicResource ExampleButtonStyle}"
Visibility="{Binding DialogOkButtonVisibility}"
ToolTip=" ">
</Button>
<!-- Tooltip not hidden because trigger doesn't hide it. -->
<Button Margin="10" Height="50" Width="100" Content="{Binding OkButtonText}"
Style="{DynamicResource ExampleButtonStyle}"
Visibility="{Binding DialogOkButtonVisibility}"
ToolTip="">
</Button>
<!-- Tooltip hidden -->
<Button Margin="10" Height="50" Width="100" Content="{Binding OkButtonText}"
Style="{DynamicResource ExampleButtonStyle}"
Visibility="{Binding DialogOkButtonVisibility}"
ToolTip="{x:Null}">
</Button>
</StackPanel>
</Grid>
And found a solution how to redefine ToolTip style:
<Button Name="BtnOk" Grid.Column="0" Margin="4,0,0,0" Content="{Binding OkButtonText}"
ToolTip="{Binding OkButtonShortcut}" Style="{DynamicResource ButtonOk}"
Click="DialogOk_Click">
<Button.Resources>
<Style TargetType="ToolTip" BasedOn="{StaticResource {x:Type ToolTip}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid Visibility="Collapsed"></Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
</Button>
I have a ListView with custom ItemContainer and ItemTemplate. ItemTemplate contains, among other controls, a button. Whenever I click or tap a button ListView a whole item is selected, in contrast to the expected button click or tap event to be fired. I've noticed that the only time the button is clickable is when I position mouse cursor at the top border of the button (whichi is also the only time I am getting the default mouse over effect).
Here is the XAML:
<Style TargetType="ListView" x:Key="SalesOrdersListViewStyle">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Padding" Value="12,6"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
Foreground="{StaticResource HighlightPressedBrush}"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{StaticResource HighlightPressedBrush}"
PressedBackground="{ThemeResource HighlightAlternativePressedBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource HighlightPointerOverBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{ThemeResource ControlBackgroundDarkBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="#FFFFFFFF"
SelectedPointerOverBackground="{ThemeResource HighlightAlternativePointerOverBrush}"
SelectedBackground="{ThemeResource HighlightPressedBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock
x:Uid="SalesOrderNumber"
Grid.Row="0" Grid.Column="1" />
<TextBlock
Grid.Row="0" Grid.Column="2"
Text="{Binding Number}" />
<!-- TEST BUTTON THAT CANNOT BE TAPPED -->
<Button
Grid.Row="0" Grid.RowSpan="4" Grid.Column="3"
HorizontalAlignment="Left" VerticalAlignment="Center"
Background="Red"
IsHitTestVisible="True"
Content="TEST" />
<TextBlock
x:Uid="DeliveryMode"
Grid.Row="1" Grid.Column="1" />
<TextBlock
Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding DeliveryMode}" /
<TextBlock
x:Uid="ShippingDate"
Grid.Row="2" Grid.Column="1" />
<TextBlock
Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding ShippingDate}" />
<TextBlock
x:Uid="ProjectNumber"
Grid.Row="3" Grid.Column="1" />
<TextBlock
Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="2"
Text="{Binding ProjectNumber}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
How do I make the button click or tap event to fire instead of selecting an item?
Note: I just commented out the entire <Setter Property="ItemContainerStyle"> and the issue is still there.
The problem is in you TextBlocks with Grid.Column="2" Grid.ColumnSpan="2". Set ColumSpan to 1 and it will work.
I am a total newbie but couldn't you just add a Button click event?
<Button
Grid.Row="0" Grid.RowSpan="4" Grid.Column="3"
HorizontalAlignment="Left" VerticalAlignment="Center"
Background="Red"
IsHitTestVisible="True"
Click"btn_Click"
Content="TEST" />
And in the code:
private void btn_Click(object sender, RoutedEventArgs e)
{
// Do stuff
}
I hope I don't talk bullsh*t here but I don't see your click event anywhere.
I have a window in wpf that looks like this with no code-behind:
Now that my form looks like I want it to, I use the following to get data from my SQL Server database and load it into the form:
Private Sub winVehicleExpenses_Loaded(sender As Object, e As RoutedEventArgs) Handles winVehicleExpenses.Loaded
taVehicleExpenses = New PIMDataSetTableAdapters.taVehicleExpenses
taVehicleExpenses.Fill(dsPIM.VehicleExpenses) 'Load all the Expense data into the PIM dataset
Dim dvTypes As DataView = New DataView(dsPIM.Tables("StandardEntries"), "CategoryID = 13", "Entry", DataViewRowState.CurrentRows) 'CategoryID = 13 are the Vehicle Expense Types
With cboTypes
.ItemsSource = dvTypes
.SelectedIndex = 0 'Move to the first entry
End With
End Sub
Now when I run the application, here is what the form looks like:
Note the gap between the "Notes" label and the notes textboxes that was not there before the data were loaded.
How can the simple process of loading data into a listbox and some textboxes change the form layout?
ADDED: Here's the XAML
<Window
x:Class="VehicleExpenses"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="VehicleExpense"
xmlns:local="clr-namespace:PIM"
x:Name="winVehicleExpenses"
Height="490"
Width="440"
ShowInTaskbar="False"
Background="#FFE8FFFD"
IsTabStop="False">
<Window.Resources>
<local:DisplayDateFormatter x:Key="FormatDisplayDate" />
<local:DisplayCurrencyFormatter x:Key="FormatCurrency" />
<local:DisplayFixedFormatter x:Key="FormatSingle" />
<Style x:Key="ItemHeaders" TargetType="Label">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Grid.Row" Value="1" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Bottom" />
</Style>
<Style x:Key="ItemLabels" TargetType="Label">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="Height" Value="26" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="80" />
<Setter Property="Margin" Value="0,5,0,0" />
</Style>
<Style x:Key="PreviousTextBoxes" TargetType="TextBox">
<Setter Property="Height" Value="26" />
<Setter Property="Margin" Value="0,5,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="80" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="Cornsilk" />
</Style>
<Style TargetType="Button">
<Setter Property="Height" Value="26" />
<Setter Property="Width" Value="60" />
<Setter Property="Margin" Value="60,0,0,0" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="225" />
<RowDefinition Height="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel
Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="3"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Label
Height="26"
FontWeight="Bold"
Content="Expense Type:" />
<ComboBox
Name="cboTypes"
Height="26"
Width="120"
FontSize="13"
DisplayMemberPath="Entry"
SelectedValuePath="EntryID"
Background="White" />
</StackPanel>
<Label
Grid.Column="0"
Content="Item"
Width="80"
Style="{StaticResource ItemHeaders}" />
<StackPanel
Grid.Column="0"
Grid.Row="2"
Height="220"
VerticalAlignment="Top">
<Label
Name="lblChargeDate"
Content="Charge Date:"
Style="{StaticResource ItemLabels}" />
<Label
Name="lblMileage"
Content="Mileage:"
Style="{StaticResource ItemLabels}" />
<Label
Name="lblGallons"
Content="Gallons:"
Style="{StaticResource ItemLabels}" />
<Label
Name="lblCharge"
Content="Charge:"
Style="{StaticResource ItemLabels}" />
<Label
Name="lblStartDate"
Content="Start Date:"
Style="{StaticResource ItemLabels}" />
<Label
Name="lblEndDate"
Content="End Date:"
Style="{StaticResource ItemLabels}" />
</StackPanel>
<Label
Content="Previous"
Grid.Column="1"
Width="93"
Style="{StaticResource ItemHeaders}" />
<Label
Content="Current"
Grid.Column="2"
Width="93"
Style="{StaticResource ItemHeaders}" />
<StackPanel
Name="pnlPrevious"
Grid.Column="1"
Grid.Row="2"
Height="220"
VerticalAlignment="Top">
<TextBox
Text="{Binding Path=ChargeDate, Converter={StaticResource FormatDisplayDate}}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<TextBox
Name="txtPreviousMileage"
Text="{Binding Path=Mileage}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<TextBox
Name="txtPreviousGallons"
Text="{Binding Path=Gallons, Converter={StaticResource FormatSingle}, ConverterParameter=3}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<TextBox
Text="{Binding Path=Charge, Converter={StaticResource FormatCurrency}}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<TextBox
Name="txtPreviousStartDate"
Text="{Binding Path=StartDate, Converter={StaticResource FormatDisplayDate}}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<TextBox
Name="txtPreviousEndDate"
Text="{Binding Path=EndDate, Converter={StaticResource FormatDisplayDate}}"
Style="{StaticResource PreviousTextBoxes}"
Focusable="False" />
<Label
Name="lblNotes"
Content="Notes:"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="0,0,30,0"
Style="{StaticResource ItemLabels}" />
</StackPanel>
<StackPanel
Grid.Column="2"
Grid.Row="2"
Height="220"
VerticalAlignment="Top">
<DatePicker
Name="dprCurrentChargeDate"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
<TextBox
Name="txtCurrentMileage"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
<TextBox
Name="txtCurrentsGallons"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
<TextBox
Name="txtCurrentCharge"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
<DatePicker
Name="dprCurrentStartDate"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
<DatePicker
Name="dprCurrentEndDate"
HorizontalAlignment="Left"
Height="23"
VerticalAlignment="Top"
Width="120" />
</StackPanel>
<StackPanel
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="3"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Orientation="Horizontal">
<TextBox
Name="txtPreviousNotes"
VerticalAlignment="Stretch"
Width="175"
Text="{Binding Notes}"
Background="Cornsilk"
Focusable="False"
Margin="10,0,0,0"/>
<TextBox
Name="txtCurrentNotes"
VerticalAlignment="Stretch"
Width="175"
Margin="55,0,0,0" />
</StackPanel>
<StackPanel
Grid.Column="0"
Grid.Row="4"
Grid.ColumnSpan="3"
Orientation="Horizontal">
<Button
Name="btnCancel"
Content="Cancel"
IsTabStop="False" />
<Button
Name="btnClose"
Content="Close"
IsTabStop="False" />
<Button
Name="btnView"
Content="View"
IsTabStop="False" />
</StackPanel>
</Grid>
Well, after you posted your code and explained further what you're doing, it's pretty clear what's going on. Label lblNotes is in the pnlPrevious StackPanel, which has its VerticalAlignment property set to Top. It makes no difference that you set the VerticalAlignment in the Label to Bottom, since it's a relative property, which makes little difference in a StackPanel. So, when you collapse some of your controls, the content in the pnlPrevious StackPanel rearranges and occupies only as much space as it needs.
The only way to get content to align to the bottom of the StackPanel, without inserting other panels in it, is to align the StackPanel itself to the Bottom. However, that would be a poor decision for your layout.
To save yourself headache and frustration, move lblNotes out of pnlPrevious and into its own row, just above the StackPanel containing notes textboxes.
There a many ways to create the LayOut in XAML.
Without the actual XAML it is a guessing exercition on how the Lay Out changed.
I'm just begin study WPF, so I'm unfamiliar with style and template.
I want to customize a CheckBox with a Image and two Labels like this:
How can I do?
.xaml
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<CheckBox Width="150"
Height="40"
Margin="4"
Padding="4,0,0,0">
<Grid Background="#FFEEEEEE"
Width="130"
MaxWidth="Infinity">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Margin="5"
Source="/WpfApplication4;component/Images/LargeIcon.png" />
<Label Grid.Row="0"
Grid.Column="1"
Padding="0">
Label1
</Label>
<Label Grid.Row="1"
Grid.Column="1"
Padding="0">
Label2
</Label>
</Grid>
</CheckBox>
</StackPanel>
</Window>
Edit:
.xaml
<Application x:Class="WpfApplication4.App"
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/2006"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="MyCheckBox"
TargetType="{x:Type CheckBox}">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="Padding" Value="4,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel Background="#FFEEEEEE"
Height="34"
Width="130">
<Image DockPanel.Dock="Left"
Source="/WpfApplication4;component/Images/LargeIcon.png"
Margin="5" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
used in .xaml
<CheckBox Style="{StaticResource ResourceKey=MyCheckBox}" />
Something be presented, but the small grid is disappeared, like this:
How can I do?
The DockPanel may be the best option for this layout
Example:
<CheckBox>
<DockPanel Height="34">
<Image DockPanel.Dock="Left" Source="/WpfApplication4;component/Images/LargeIcon.png" Margin="2" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</CheckBox>
Edit:
It looks like you still want to use the default Checkbox Template but just override the Content in your Style.
Example:
<Style x:Key="MyCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="Padding" Value="4,0,0,0"/>
<Setter Property="Content">
<Setter.Value>
<DockPanel Background="#FFEEEEEE" Width="130" MaxWidth="Infinity">
<Image DockPanel.Dock="Left" Source="Capture.png" Margin="5" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</Setter.Value>
</Setter>
</Style>
Result:
I'm Trying to get the value of a slider thats contained in a window from a usercontrol thats also contained in that window.
this is what i would like to accomplish.
<Window x:Class="TestApp3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Window.Resources>
<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
<Setter Property="Value" Value="10" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Interval" Value="1" />
<Setter Property="Minimum" Value="5" />
<Setter Property="Maximum" Value="50" />
<Setter Property="TickFrequency" Value="0.25" />
<Setter Property="IsSnapToTickEnabled" Value="True" />
<Setter Property="Width" Value="100" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="Test" />
<Border
Grid.Row="1"
Background="Purple"
BorderBrush="Black"
BorderThickness="1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
FontSize="16"
Content="Font Size:"/>
<TextBox
Grid.Column="1"
FontSize="16"
Text="{Binding ElementName=SliderFont, Path=Value, Mode=TwoWay}"
Width="50"
MaxLength="5" />
<Slider
Style="{DynamicResource SliderStyle}"
Grid.Column="2"
Name="SliderFont" />
</Grid>
</Border>
</Grid>
</Window>
same idea but using a usercontrol.
<Window x:Class="TestApp3.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestApp3"
Title="Window1">
<Window.Resources>
<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
<Setter Property="Value" Value="10" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Interval" Value="1" />
<Setter Property="Minimum" Value="5" />
<Setter Property="Maximum" Value="50" />
<Setter Property="TickFrequency" Value="0.25" />
<Setter Property="IsSnapToTickEnabled" Value="True" />
<Setter Property="Width" Value="100" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--<TextBox Grid.Row="0" Text="Test" />-->
<local:myusercontrol Grid.Row="0" />
<Border
Grid.Row="1"
Background="Purple"
BorderBrush="Black"
BorderThickness="1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
FontSize="16"
Content="Font Size:"/>
<TextBox
Grid.Column="1"
FontSize="16"
Text="{Binding ElementName=SliderFont, Path=Value, Mode=TwoWay}"
Width="50"
MaxLength="5" />
<Slider
Style="{DynamicResource SliderStyle}"
Grid.Column="2"
Name="SliderFont" />
</Grid>
</Border>
</Grid>
</Window>
The usercontrol
<UserControl x:Class="TestApp3.myusercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<TextBox Text="Test" />
</Grid>
</UserControl>
The usercontrols textbox fontsize isnt growing at all. the reason i want to get this working is cause i'd like to put somthing like it in our themes so we wont have to worry about it later on. I've been tinkering with this for far too long. Any ideas on how to get this working would be great.
i know i can pass along the FontSize value in the usercontrol but i'd like to be able to control more than one controls FontSize.
Hope this makes sense,
~Boots
OK, it took me a little while, but I finally got this working.
You need to create a dependency property in your user control (this is in the code behind - C# in this case):
public static readonly DependencyProperty UCFontSizeProperty = DependencyProperty.Register(
"UCFontSize", typeof(double), typeof(myusercontrol));
public double UCFontSize
{
get { return (double)this.GetValue(UCFontSizeProperty); }
set { this.SetValue(UCFontSizeProperty, value); }
}
Then in the user control XAML have:
<UserControl x:Class="TestApp3.myusercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="TextBoxUserControl"
Height="200" Width="250">
<Grid>
<TextBox Text="Test" FontSize="{Binding ElementName=TextBoxUserControl, Path=UCFontSize}" x:Name="UCTextBox" />
</Grid>
</UserControl>
Then add another Style setter:
<Style TargetType="{x:Type local:U myusercontrol}">
<Setter Property="UCFontSize" Value="{Binding ElementName=SliderFont, Path=Value}" />
</Style>
You don't need to change how you instantiate the user control on your main page.
I got it to work using an XMLfile as a resource.
Just add this to your resources
<XmlDataProvider x:Key="XmlFontFile" Source="pack://application:,,,/TestApp3;component/XMLFile1.xml" />
and this to your SliderStyle
<Setter Property="Value" Value="{Binding Source={StaticResource XmlFontFile}, XPath=Style/TextBoxFontSize, Mode=TwoWay}" />
and this to your TextBoxStyle
<Setter Property="FontSize" Value="{Binding Source={StaticResource XmlFontFile}, XPath=Style/TextBoxFontSize}" />
my xmlfile looks like
<?xml version="1.0" encoding="utf-8" ?>
<Style>
<TextBoxFontSize>16</TextBoxFontSize>
</Style>