I have 5 borders inside a stackpanel and each border has a width as Window width/5. When I am maximizing the window then each border width should get resize according to window width/5.
I have tried with converter but it does' not work as how converter will come to know window has resized.
<Window x:Class="ItemPanelTemplateTest.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 Orientation="Horizontal">
<Border Height="20" Background="Red" Width="105" />
<Border Height="20" Background="Green" Width="105" />
<Border Height="20" Background="Yellow" Width="105" />
<Border Height="20" Background="Blue" Width="105" />
<Border Height="20" Background="Orange" Width="105" />
</StackPanel>
</Window>
I don't want to write anything on codebehind as I am using MVVM.
Use different container than StackPanel. The best candidates here are Grid and UniformGrid, but since the latter requires less typing, here it is:
<Window x:Class="WpfApplication1.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">
<UniformGrid Height="20" Rows="1">
<Border Background="Red" />
<Border Background="Green" />
<Border Background="Yellow" />
<Border Background="Blue" />
<Border Background="Orange" />
</UniformGrid>
</Window>
The grid will resize automatically with the window and then resize its contents uniformly.
Related
In my following WPF app, how can we change the size of the CheckBox without changing the size of its content (an Segoe MDL2 Assets icon). I would like to see the checkbox rectangle to be the half the size of its content (an icon). If I set the width and height of the checkbox to 10 it reduces the content size (icon) as well:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<StackPanel Margin="10">
<Label FontWeight="Bold">Application Options</Label>
<CheckBox VerticalContentAlignment="Center">
<TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="20"/>
</CheckBox>
</StackPanel>
</Grid>
</Window>
Display of the above XAML:
You could move the TextBlock out of the CheckBox. Something like this:
<StackPanel Margin="10">
<Label FontWeight="Bold">Application Options</Label>
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center">
<CheckBox.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5" />
</CheckBox.RenderTransform>
</CheckBox>
<TextBlock Grid.Column="1" Text="" FontFamily="Segoe MDL2 Assets" FontSize="20"/>
</Grid>
</StackPanel>
I have a comboBox, user controls and a button. SelectionChanged event is not firing in my UI App but when I copy the same combobox code in a different WPF app, selectionChanged event is firing. I don't understand why event is not triggered just here.
<Window x:Class="ExecutionInformation.TesterApp.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:ExecutionInformation.TesterApp.UserControls"
mc:Ignorable="d"
Title="MainWindow" Height="Auto" Width="800">
<ScrollViewer>
<Grid>
<StackPanel>
<Label Content="Execution Information service" Margin="20,10,20,10"
HorizontalAlignment="Center" FontSize="15" FontFamily="Bold"/>
</StackPanel>
<StackPanel Margin="20">
<!--<ComboBox Name="CmbAPIList" ItemsSource="{StaticResource ExecInfoServiceApis}"
DisplayMemberPath ="ValueString"
SelectedValuePath="ValueString" Margin="100,20,100,0"
SelectedValue="{Binding ColorString}" SelectionChanged="CmbAPIList_SelectionChanged"/>-->
<ComboBox Name="CmbAPIList"
SelectionChanged="CmbAPIList_SelectionChanged">
<ComboBoxItem>ApproveTestStartAsync</ComboBoxItem>
<ComboBoxItem>CompleteTestAsync</ComboBoxItem>
<ComboBoxItem>GetPartAsync</ComboBoxItem>
<ComboBoxItem>GetAssemblyAsync</ComboBoxItem>
<ComboBoxItem>PutAssemblyAttributesAsync</ComboBoxItem>
</ComboBox>
<local:ApproveTestStartUC x:Name="approveTestStartUC" Visibility="Collapsed" Margin="20,10,20,10" Background="Cyan" />
<local:CompleteTestUC x:Name="completeTestUC" Visibility="Collapsed" Margin="20,10,20,10" />
<local:GetPartUC x:Name="getPartUC" Visibility="Collapsed" Margin="20,10,20,10" />
<local:GetAssembly x:Name="getAssemblyUC" Visibility="Collapsed" Margin="20,10,20,10" />
<local:PutAssemblyAttributesUC x:Name="putAssemblyUC" Visibility="Collapsed" Margin="20,10,20,10"/>
<WrapPanel Margin="15" HorizontalAlignment="Center">
<Button Name="btnShowResults" Click="btnShowResults_Click" Visibility="Collapsed" Width="100">Show Results</Button>
</WrapPanel>
<Border BorderThickness="1" BorderBrush="LightGreen">
<TextBlock Name="TxtResults" Visibility="Collapsed"></TextBlock>
</Border>
</StackPanel>
</Grid>
</ScrollViewer>
Commented ComboBox code in the above code works without any issues.
Thanks
I have the following XAML:
<Window x:Class="test_stacking.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 Background="AliceBlue">
<Canvas Background="Red">
</Canvas>
<ListBox Width="200" VerticalAlignment="Bottom">
<TextBlock Text="One" />
<TextBlock Text="Two" />
</ListBox>
</StackPanel>
</Window>
I would like the Canvas to be on top, and the ListBox to be on the bottom. Since the default orientation for a StackPanel is vertical, I thought I would get the Canvas and the ListBox, in that order, stacked within the StackPanel.
But instead, I get what is shown below: the ListBox is on top, and the Canvas does not show at all. What am I doing wrong?
.NET FW 4 Client Profile, Windows 7, VS 2010.
If it is not mandatory to use StackPanel then you can achieve that by using Grid's * sizing.
Here is an example:
<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="500" Width="500">
<Grid Background="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Canvas Background="Red">
</Canvas>
<ListBox Grid.Row="1" Width="200" VerticalAlignment="Bottom">
<TextBlock Text="One" />
<TextBlock Text="Two" />
</ListBox>
</Grid>
</Window>
Output:
Or
<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="500" Width="500">
<Grid Background="AliceBlue">
<Canvas Background="Red">
</Canvas>
<ListBox Width="200" VerticalAlignment="Bottom">
<TextBlock Text="One" />
<TextBlock Text="Two" />
</ListBox>
</Grid>
</Window>
Output:
Since you haven't set any height or width to the canvas, the height and width for the canvas is set to zero and thats why its not shown in the UI.
Try this
<StackPanel Background="AliceBlue">
<Canvas Background="Red" Width="200" Height="200">
</Canvas>
<ListBox Width="200" VerticalAlignment="Bottom">
<TextBlock Text="One" />
<TextBlock Text="Two" />
</ListBox>
</StackPanel>
i have this code:
<Window x:Class="WpfApplication8.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">
<Grid>
<ScrollViewer Background="#FFADB9CD" >
<Grid>
<Border Name="mask" Height="{Binding ElementName=cnvsEtikett, Path=Height}" Width="{Binding ElementName=cnvsEtikett, Path=Width}" Background="White" CornerRadius="6"/>
<Canvas Height="100" Name="cnvsEtikett" Width="200" Background="White" ClipToBounds="True">
<Canvas.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}" />
</Canvas.OpacityMask>
<TextBlock Height="23.2" Text="TextBlock" Canvas.Left="63" Canvas.Top="41" />
</Canvas>
</Grid>
</ScrollViewer>
</Grid>
</Window>
I want the canvas to have rounded corners, which works until i drag the textblock to either side. then the corners dissappear. this is a simple recreation of the window in my programm, there i use drag and drop operations to move the textblock. I really need those rounded corners, but i am absolutely clueless of how i could solve this problem!
any ideas??
edit: it seems as if the canvas is stretched as the textblock is moved to the edge ( because the corner radius changes too!)
Just thought of another solution..
<Border ClipToBounds="True" CornerRadius="6" Background="White" Name="brdEtikett" Height="200" Width="200" >
<Canvas Name="cnvsEtikett" Background="Transparent" />
</Border>
set the background of the border to the color you want on the canvas and make the canvas transparent!!
this way you don't have to put padding or margin on the elements!
Best bet is probably to put the canvas inside the border (I typically put a small margin on panels inside of rounded corner borders to keep stuff from sticking out). This way, the border will expand or contract automatically as the canvas does (provided it is set to auto height width).
Border can have a single content child, in this case the Canvas with content of its own.
EDIT
Doesn't this achieve the same thing?
<Window
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" x:Class="WpfApplication8.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ScrollViewer Background="#FFADB9CD" >
<Grid>
<Border x:Name="mask" Background="White" CornerRadius="6" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Height="100" x:Name="cnvsEtikett" Width="200" ClipToBounds="True" d:LayoutOverrides="Margin">
<TextBlock Height="23.2" Text="TextBlock" Canvas.Left="59" Canvas.Top="31" />
</Canvas>
</Border>
</Grid>
</ScrollViewer>
</Grid>
</Window>
Gong Solutions Drag Drop Helper library
i am learning WPF here is my XAML.
<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="634">
<StackPanel>
<Button Height="35"
Width="89"
Name="p1">Hello</Button>
<Border CornerRadius="5"
BorderThickness="1"
BorderBrush="Black"
Height="35"
Width="254"
Margin="91,192,150,79">
<TextBox HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Height="35"
Width="250"
Name="txtContents" />
</Border>
<Button Height="23"
Name="button1"
Width="75">Button</Button>
</StackPanel>
button textbox is showing but the problem is I am not being able to drag the control to another location. how to fix it. please help. thanks
If you mean you can't drag the Button controls to different locations, it's because they're contained within a StackPanel - stacking them one on top of each other.
If you change that StackPanel to be a Grid, you'd have the ability to drag it around in a canvas-like manner.
<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="634">
<Grid>
<Button Height="35"
Width="89"
Name="p1">Hello</Button>
<Border CornerRadius="5"
BorderThickness="1"
BorderBrush="Black"
Height="35"
Width="254"
Margin="91,192,150,79">
<TextBox HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Height="35"
Width="250"
Name="txtContents" />
</Border>
<Button Height="23"
Name="button1"
Width="75">Button</Button>
</Grid>
This question may shed some light on where to use Grids and StackPanels.
If by "able to drag the control to another location" you are talking about repositioning the control using Expression Blend or the Visual Studio Designer you need to change the StackPanel to a Grid
So it would become-
<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="634">
<Grid>
<Button Height="35"
Width="89"
Name="p1">Hello</Button>
<Border CornerRadius="5"
BorderThickness="1"
BorderBrush="Black"
Height="35"
Width="254"
Margin="91,192,150,79">
<TextBox HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="Transparent"
BorderThickness="0"
Height="35"
Width="250"
Name="txtContents" />
</Border>
<Button Height="23"
Name="button1"
Width="75">Button</Button>
</Grid>