When i resize the window the buttons dont resize with it, everything else like the websites do but not the buttons. i tried using "border" method but it only fixed resizing the content, the background also works fine.
<Window Title="MainWindow" Height="700" Width="980"
Background="Transparent" >
<Border>
<Grid MinHeight="1" MinWidth="1">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="images\tarkov wallpaper.jpg"/>
</Grid.Background>
<Button x:Name="fleam" Click="flea_click" Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Width="245" Height="51" Margin="734,52,0,0" BorderThickness="0" >
<Image Source="images\flea.png" Height="51" Width="235" Stretch="Fill" />
</Button>
<Button x:Name="maps" Click="map_click" Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Width="245" Height="51" Margin="491,52,0,0" BorderThickness="0" >
<Image Source="images\maps.png" Height="51" Width="245" Stretch="Fill" />
</Button>
<Button x:Name="ammo" Click="ammo_click" Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Width="245" Height="51" Margin="246,52,0,0" BorderThickness="0" >
<Image Source="images\ammo.png" Height="51" Width="245" Stretch="Fill" />
</Button>
<Button x:Name="armor" Click="armor_click" Background="Black" HorizontalAlignment="Left" VerticalAlignment="Top" Width="245" Height="51" Margin="1,52,0,0" BorderThickness="0" >
<Image Source="images\armor.png" Height="51" Width="245" Stretch="Fill" />
</Button>
<eo:WebControl x:Name="fleamarket" Margin="10,108,10,0" Visibility="Hidden">
<eo:WebControl.WebView>
<eo:WebView Url="https://tarkov-market.com/">
</eo:WebView>
</eo:WebControl.WebView>
</eo:WebControl>
<eo:WebControl x:Name="map" Margin="10,122,-5,10" Visibility="Hidden">
<eo:WebControl.WebView>
<eo:WebView Url="https://mapgenie.io/tarkov">
</eo:WebView>
</eo:WebControl.WebView>
</eo:WebControl>
<eo:WebControl x:Name="ammon" Margin="10,108,10,10" Visibility="Hidden">
<eo:WebControl.WebView>
<eo:WebView Url="https://docs.google.com/spreadsheets/d/1_l-gYeSt2MqIw62EdMZt_wefG0yO9L7dTaRM74c2J1w/edit#gid=2023683591" >
</eo:WebView>
</eo:WebControl.WebView>
</eo:WebControl>
<Image x:Name="armorimg" Source="images/amorcont.jpg" Margin="-18,108,-18,0" Visibility="Hidden"/>
</Grid>
</Border>
</Window>
Firstly, try to define rows and columns for your Grid.
Secondly, remove the Width and Height properties for your controls.
Finally, use Margin property to determine the relative size and position of the controls inside the Grid cells.
This code will help you:
<Window Title="MainWindow" Height="120" Width="120">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Margin="10">Button 1</Button>
<Button Grid.Column="1" Margin="10">Button 2</Button>
<Button Grid.Column="2" Margin="10">Button 3</Button>
<Button Grid.Row="1" Margin="10">Button 4</Button>
<Button Grid.Column="1" Grid.Row="1" Margin="10">Button 5</Button>
<Button Grid.Column="2" Grid.Row="1" Margin="10">Button 6</Button>
<Button Grid.Row="2" Margin="10">Button 7</Button>
<Button Grid.Column="1" Grid.Row="2" Margin="10">Button 8</Button>
<Button Grid.Column="2" Grid.Row="2" Margin="10"Button 9</Button>
</Grid>
</Window>
Related
I have custom title bar for all windows of my application.
I want to create a template that I can use many times on different windows or on Message Box
I am thinking what is the best practice to achieve this.
At the moment I have a title bar but it is hard coded in every window.
This is an example of one of the windows
<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
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"
Title="Some text"
Height="113.868" Width="405.84"
Background="#FFE5E5E5"
WindowStyle="None"
>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
</Window.Resources>
<Border x:Name="MainWindowBorder" BorderThickness="0" >
<Grid x:Name="parentContainer">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#585856">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Click="CommandBinding_Executed_Minimize"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Click="CommandBinding_Executed_Close"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBox x:Name="Input"/>
<Button x:Name="OkButton"
Content="Ok"/>
</Grid>
</Grid>
</Border>
</Window>
Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.
the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.
There one custom title bar in my WPF app :
<Grid FlowDirection="RightToLeft">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
<Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
<materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
</Button>
<Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
<materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
</Button>
</StackPanel>
</Grid>
and in picture :
Again don't forget to set WindowStyle="None"
I'm trying to create some bar charts from DotNetProjects.Wpf.Toolkit that display some data totals, though the data can change at run time. The problem is that I cannot get the chart to fit the size of the content - I always have to provide a fixed value (and setting Height="Auto" doesn't work), but I don't know what the size will need to be while running. What can I do to make my chart fit the content rather than the other way around?
My XAML code looks like this:
<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"
xmlns:local="clr-namespace:Movie_Vault"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="Movie_Vault.frmStatistics"
mc:Ignorable="d"
Title="frmStatistics" Style="{StaticResource RoundedFormStyle}" WindowStartupLocation="CenterOwner">
<Border Style="{StaticResource WindowBorderStyle}">
<DockPanel x:Name="OuterPanel" >
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Top">
<DockPanel x:Name="TopPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Image Height="16" Margin="8,4,8,4" Source="Images/process.png"/>
<TextBlock Style="{StaticResource MediumFont}"><Run Text="Statistics"/></TextBlock>
<DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button x:Name="btnClose" Content="X" Style="{StaticResource MicroButtonStyle}" Margin="0,0,8,0" Click="btnClose_Click"/>
</DockPanel>
</DockPanel>
</Border>
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,0,0">
<DockPanel VerticalAlignment="Top" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="400" Width="500">
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
</ScrollViewer>
</DockPanel>
</Border>
</DockPanel>
</Border>
</Window>
What can I do to make my chart fit the content rather than the other way around?
Get rid of any StackPanels:
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
A StackPanel doesn't resize its children.
My user control seems fine with 0 errors and 0 warnings
But when I add my user control to the grid row it doesn't show all the buttons from my user control. There isn't errors or even warnings
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UX="clr-namespace:JBoxSystem.UX" x:Class="JBoxSystem.MainWindow"
Title="MainWindow" Height="700" Width="1100" Background="#333">
<Window.Resources>
<Storyboard x:Key="playingEffect"/>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource playingEffect}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="79*"/>
<ColumnDefinition Width="429*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="250*"/>
<RowDefinition Height="79*"/>
</Grid.RowDefinitions>
<WindowsFormsHost Grid.Column="1"/>
<UX:AlbumSlider Grid.Column="1" Margin="10,0,0,0" Width="Auto" Height="Auto"/>
<UX:MediaPlayerBar Margin="8,12,6,371" Height="Auto" Width="Auto"/>
<UX:BottomBar Width="Auto" Height="Auto" Grid.ColumnSpan="2" Grid.Row="1"/>
</Grid>
<UserControl x:Class="JBoxSystem.UX.BottomBar"
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"
xmlns:local="clr-namespace:JBoxSystem.UX"
mc:Ignorable="d"
d:DesignHeight="250" d:DesignWidth="1020" Background="Transparent">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/JBoxSystem;component/Resources/GlassButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid Margin="-15,0,15,0">
<Button Style="{StaticResource GlassButton}" Background="Blue" Margin="248,180,717,18">
<Image Width="47" Height="45" Source="Resources\Images\VolumeUp.png"/>
</Button>
<Button Style="{StaticResource GlassButton}" Background="Blue" Margin="168,180,797,18" Click="Button_Click">
<Image Width="55" Height="45" Source="Resources\Images\VolumeDown.png"/>
</Button>
<Button Style="{StaticResource GlassButton}" Width="45" Height="47" Background="Orange" Margin="323,183,652,20" Click="Button_Click">
<Image Width="55" Height="45" Source="Resources\Images\Mute.png"/>
</Button>
<Button Style="{DynamicResource SquareGlassButton}"
Margin="0,0,890,18"
Name="alphabetSearch"
Height="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="120">
<Image Width="72" Height="72" Source="Resources\Images\alphabet_search.png"/>
</Button>
<Button Style="{DynamicResource SquareGlassButton}"
Margin="0,0,442,-2"
Name="alphabetKeyboardSearch"
Height="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="120">
<Image Width="72" Height="72" Source="Resources\Images\keyboard.png"/>
</Button>
<Button Style="{StaticResource GlassButton}" Width="40" Height="40" Background="Black" Margin="413,160,567,50">
<Image Width="30" Height="30" Source="Resources\images\leftArrow.png" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-359.529"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Button>
<Button Style="{StaticResource GlassButton}" Width="40" Height="40" Background="Black" Margin="583,160,397,50">
<Image Width="30" Height="30" Source="Resources\images\RightArrow.png"/>
</Button>
<Button Style="{DynamicResource SquareGlassButton}"
Margin="0,0,442,70"
Name="numberPadSearch"
Height="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="120">
<Image Width="72" Height="72" Source="Resources\Images\numbers.png"/>
</Button>
<Button Style="{DynamicResource SquareGlassButton}"
Margin="0,0,250,10"
Name="top100Search"
Height="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="120">
<Image Width="64" Height="64" Source="Resources\Images\favorite.png"/>
</Button>
<Button Style="{DynamicResource SquareGlassButton}"
Margin="0,0,122,10"
Name="waitingList"
Height="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="120">
<Image Width="64" Height="64" Source="Resources\Images\waitingList.png"/>
</Button>
</Grid>
Use VerticalAlignment="Bottom" HorizontalAlignment="Right" for glas button like this
<Button Style="{StaticResource GlassButton}" Background="Blue" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="248,180,717,18">
<Image Width="47" Height="45" Source="Resources\Images\VolumeUp.png"/>
</Button>
<Button Style="{StaticResource GlassButton}" Background="Blue" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="168,180,797,18" Click="Button_Click">
<Image Width="55" Height="45" Source="Resources\Images\VolumeDown.png"/>
</Button>
<Button Style="{StaticResource GlassButton}" Width="45" Height="47" Background="Orange" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="323,183,652,20" Click="Button_Click">
<Image Width="55" Height="45" Source="Resources\Images\Mute.png"/>
</Button>
I want to make the size of an ellipse relative to its holding grids Column and Row size.
So, the size of the ellipses should change relative to the size of the page (device) of the given hardware..
Something like 'Inherit' from css.
Is this possible?
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
<RowDefinition Height="10*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Ellipse Fill="DarkGray" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="200" />
<Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="1" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Ellipse Fill="DarkGray" Height="200" Width="200" Grid.Row="2" Grid.Column="2" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
Use ViewBox for this purpose. For example, replace the 3rd Ellipse with the following code. It will grows/shrinks with the containing Grid.
<Viewbox Grid.Row="2" Grid.Column="2">
<Ellipse Fill="DarkGray" Height="200" Width="200" Stroke="Black" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Viewbox>
I am new to WPF, and I am trying to arrange a bunch of buttons:
I have 5 Marllet buttons: up, down, left, right, reset.
Arrange up, down, left and right at top, bottom, left and right respectively
And I want the reset button to take the center position surrounded by other 4 buttons.
Here is my current WPF code, but it lines up the reset button next to other 4, and the other 4 just lined up from top to bottom
<StackPanel Orientation="Horizontal">
<StackPanel>
<Button Content="Reset" Width="75" Height="30" Click="btnResetCrop3D_Click"/>
</StackPanel>
<StackPanel>
<Button FontFamily="Marlett" FontSize="20" Content="3" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="4" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="5" Width="20" Height="30"/>
<Button FontFamily="Marlett" FontSize="20" Content="6" Width="20" Height="30"/>
</StackPanel>
</StackPanel>
I am sorry I don't have enough credits to post an image. So if you have any confusion regarding my description, please let me know.
As #JeffRSon said use Grid
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="0" Content="Left" />
<Button Grid.Row="0" Grid.Column="1" Content="Top" />
<Button Grid.Row="1" Grid.Column="2" Content="Right" />
<Button Grid.Row="2" Grid.Column="1" Content="Bottom" />
<Button Grid.Row="1" Grid.Column="1" Content="Center" />
</Grid>
Same thing done with a DockPanel
<DockPanel Height="300" Width="300">
<Button Content="Top" DockPanel.Dock="Top" Height="100" Width="100"/>
<Button Content="Bottom" DockPanel.Dock="Bottom" Height="100" Width="100"/>
<Button Content="Left" Height="100" Width="100"/>
<Button Content="Right" DockPanel.Dock="Right" Height="100" Width="100"/>
<Button Content="Last Child" Height="100" Width="100"/>
</DockPanel>
Personal choice, though :)