Kind of new to Silverlight, how can I make a grid 3d-looking (kind of like how the Silverlight progress bar visually stands out). I feel like I have tried everything but I have ran out of ideas. Could anyone give me a code snippet that can do this?
Have you tried using the DropShadowEffect?
<data:DataGrid>
<data:DataGrid.Effect>
<DropShadowEffect />
</data:DataGrid.Effect>
...
...
</data:DataGrid>
You can use this on other controls as well of course.
Creating a sunken effect is all about the illusion of lighting. If you draw a border around the element with a dark color on the top and left and lighter color on the bottom and right you get the impression that the content has been sunk into the surface. Switching the shade will give the effect of the content being raised.
Here is a small example to demonstrate
<UserControl x:Class="SilverlightApplication1.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" Background="Lightgray">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Grid.Column="1" Orientation="Vertical">
<!-- Sunken -->
<Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
<!-- Draw the 3d border -->
<Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
<Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Rectangle Width="1" Fill="White" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<!-- Put your content in this Grid -->
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Sunken" />
</Grid>
</Grid>
<!-- Raised -->
<Grid Width="100" Height="25" Background="Wheat" Margin="0,5,0,0">
<!-- Draw the 3d border -->
<Rectangle Height="1" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Rectangle Width="1" Fill="White" HorizontalAlignment="Left" VerticalAlignment="Stretch" />
<Rectangle Height="1" Fill="DarkGray" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" />
<Rectangle Width="1" Fill="DarkGray" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
<!-- Put your content in this Grid -->
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Raised" />
</Grid>
</Grid>
</StackPanel>
</Grid>
</UserControl>
Related
I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>
For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="🗕" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="🗖" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="╳" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.
I have a UserControl which contains a button CollapseConsoleBtn:
<UserControl //namespaces
<Grid
Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="0"
Margin="5,0,0,0"
Orientation="Horizontal">
<Button
x:Name="CollapseBtn"
Width="25"
Height="25"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Click="CollapseBtn_Click"
Content="â–¼"
FontSize="12">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Image
Height="25"
Margin="7,0,0,0"
Source="/Images/console-icon.png"
Visibility="Visible" />
<Label
Margin="2,0,0,0"
Content="Console"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
</UserControl>
My problem here is that I want to make the button smaller - for example with Height 20 and Width 20. I can change the width, but apparently, the height is fixed to be 25. Even if I set it to 15, it remains the same size.
Has anyone encountered this problem?
I think trouble is in <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}"> (you put Button and StackPanel there).
I tried to removed it, a bit played with margins and paddings, setted a size of button 16x16 (MinWidth & MinHeight properties) and get this result:
UserControl XAML:
<Grid Name="LoggingGrid"
Height="100"
Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="26" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button x:Name="CollapseButton"
Click="CollapseBtn_Click"
MinWidth="16"
MinHeight="16"
Margin="2,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Grid.Row="0"
Content="â–¼">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="White" />
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<StackPanel Margin="5,0,0,0"
Orientation="Horizontal">
<Image Height="25"
Visibility="Visible" />
<Label Margin="18,0,0,0"
Content="Console"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0,0,0,2"
FontSize="16"
Foreground="White" />
</StackPanel>
</Grid>
What you can do is:
Set the button's MinHeight instead of Height.
Make sure that the button's HorizontalAlignment and VerticalAlignment are set as their default value is Stretch.
I was following the tutorial from - https://learn.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/walkthrough-my-first-wpf-desktop-application?view=netframeworkdesktop-4.8
till the handle events section
But I encountered at line 35 in this XAML code -ERROR XLS0509
Saying
Error XLS0509 Property elements cannot be in the middle of an element's content. They must be before or after the content.
<Page x:Class="ExpenseIt.ExpenseItHome"
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:ExpenseIt"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="500"
Title="ExpenseIt - Home">
<Grid Margin="10, 0, 10, 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!--People List-->
<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" FontWeight="Bold" FontSize="18" Foreground="White">
View Expense Report
</Label>
<Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#FFD44E4E">
<Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<!-- bg img-->
<Grid.Background>
<ImageBrush ImageSource="368.png"/>
</Grid.Background>
<ListBox Grid.Column="1" Grid.Row="2">
<ListBoxItem>Mike</ListBoxItem>
<ListBoxItem>Lisa</ListBoxItem>
<ListBoxItem>John</ListBoxItem>
<ListBoxItem>Mary</ListBoxItem>
</ListBox>
<!-- View report Button -->
<Button Grid.Column="1" Grid.Row="3" Margin="0, 10, 0, 0" Width="125" Height="25" HorizontalAlignment="Right">View</Button>
</Grid>
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.
Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.
Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>