Here's my XAML code:
<Window x:Class="CarFinder.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Search for cars in TuMomo" Height="480" Width="600">
<DockPanel Margin="8">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="LightGray"
BorderThickness="2"
Padding="8">
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Top"
Height="25">
<TextBlock FontSize="14" Padding="0 0 8 0">
Search:
</TextBlock>
<TextBox x:Name="txtSearchTerm" Width="400" />
<Image Source="/CarFinder;component/Images/Chrysanthemum.jpg" />
</StackPanel>
</Border>
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Top"
Height="25">
</StackPanel>
</DockPanel>
</Window>
The border is set around the entire window. And also, when I create another StackPanel it's added to the right of my previous StackPanel instead of being added under it. What's the reason for this?
What about this one :
<DockPanel Margin="8">
<Border CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="2" DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="14" Padding="0 0 8 0" HorizontalAlignment="Center" VerticalAlignment="Center">Search:</TextBlock>
<TextBox x:Name="txtSearchTerm" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Image Source="lock.png" Width="32" Height="32" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Height="25" />
</DockPanel>
You set DockPanel.Dock="Top" to the StackPanel, but the StackPanel is not a child of the DockPanel... the Border is. Your docking property is being ignored.
If you move DockPanel.Dock="Top" to the Border instead, both of your problems will be fixed :)
May be it will helpful:
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="160" Margin="10,55,0,0" VerticalAlignment="Top" Width="492"/>
Related
Here is my Code:
<Grid>
<ScrollViewer Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBox MinWidth="80" Name="tbTodoName" Margin="5, 2"/>
<Button Content="Add" Height="30" Margin="5, 0"/>
</StackPanel>
<ListBox Name="lstTodo" ItemsSource="{Binding}" BorderThickness="0" Padding="0" ItemTemplate="{StaticResource TodoTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch">
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
and here is a picture of what the program looks like:
As can be seen in the picture, a frame is displayed around the ListBox. I don't understand why, since I set BorderThickness and Padding = "0".
Can someone help me?
You have set a custom ItemTemplate, which is applied only to the items.
You will need to apply the Template as well:
<Grid>
<ScrollViewer Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Disabled">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBox MinWidth="80" Name="tbTodoName" Margin="5, 2"/>
<Button Content="Add" Height="30" Margin="5, 0"/>
</StackPanel>
<ListBox Name="lstTodo" ItemsSource="{Binding}" BorderThickness="0" Padding="0" ItemTemplate="{StaticResource TodoTemplate}" Template={StaticResource ListBoxNoBorder}
ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch">
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
And in your resource dictionary:
<ControlTemplate x:Key="ListBoxNoBorder" TargetType="{x:Type ListBox}">
<Border BorderBrush="Transparent" BorderThickness="0">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
I would like to make the "Cartoon" below to be aligned to the right and the yellow part to fill all the space in the middle of my ListBox item.
However, all I can get is this:
Here is my layout xaml:
<Window x:Class="Cartoons.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Cartoons" Height="350" Width="525" SizeToContent="Width">
<DockPanel x:Name="mainPanel">
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Stretch" Background="PowderBlue">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Left" >
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Right">
<TextBlock Text="Cartoon" VerticalAlignment="Center"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
</DockPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</DockPanel>
</Window>
I have tried many things but regardless what I do, it is alwasy displayed with large white space to the right.
Much appreciated,
If you're not avoiding hard-coding numbers in, such as margins, you could try this (tested in Visual Studio for your convenience):
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBoxItem>
<!-- Width of the below element may have to be adjusted -->
<Grid HorizontalAlignment="Stretch" Width="499">
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill" HorizontalAlignment="Left"/>
<!-- Margin of the below element may have to be adjusted -->
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Yellow" Margin="69,8,0,8">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
<Label Background="AliceBlue" Content="Cartoon" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ListBoxItem>
</ListBox>
</Grid>
</Border>
Also, there is an extra near the bottom of your XAML, above .
The problem is that the ListBox will generate container elements (of type ListBoxItem) for each item - these will, by default, align content to the left. To change that, add this to your ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
I figured it out.
Needed to set HorizontalContentAlignment="Stretch" on ListBox.
That resolved the issue. Just modify above line
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
to
<ListBox Name="listBoxCartoons" HorizontalContentAlignment="Stretch" SelectionChanged="ListBox_SelectionChanged">
and it worked.
How to get these dockpanels right ?
<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
<DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
<DockPanel>
<TextBlock Width="400" />
</DockPanel>
<DockPanel Height="35" DockPanel.Dock="Bottom" LastChildFill="False">
<Button x:Name="btnRefresh" Content="Refersh" />
</DockPanel>
</DockPanel>
The DockPanel with the TextBlock spans over the DockPanel that is docked at the bottom, I want it to fit right up to it. Any ideas?
Ok, it turns out: the panel docked at the bottom must preceed the dockpanel above it in the xaml declaration. LastChildFill="True" applies to the control that is declared last in the code.
<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
<DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
<DockPanel Height="35" DockPanel.Dock="Bottom" LastChildFill="False">
<Button x:Name="btnRefresh" Content="Refersh" />
</DockPanel>
<DockPanel>
<TextBlock Width="400" />
</DockPanel>
</DockPanel>
Please refer to the DockPanel Class page at MSDN which has all the help that you need. The XAML example from the linked page:
<DockPanel LastChildFill="True">
<Border Height="25" Background="SkyBlue" BorderBrush="Black" BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="Black">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="Blue" BorderBrush="Black" BorderThickness="1"
DockPanel.Dock="Top">
<TextBlock Foreground="White">Dock = "Top"</TextBlock>
</Border>
<Border Height="25" Background="Yellow" BorderBrush="Black" BorderThickness="1"
DockPanel.Dock="Bottom">
<TextBlock Foreground="Black">Dock = "Bottom"</TextBlock>
</Border>
<Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1"
DockPanel.Dock="Left">
<TextBlock Foreground="Black">Dock = "Left"</TextBlock>
</Border>
<Border Background="White" BorderBrush="Black" BorderThickness="1">
<TextBlock Foreground="Black">This will fill the remaining space</TextBlock>
</Border>
</DockPanel>
Note the use of the DockPanel.Dock attached properties.
<DockPanel Grid.Row="1" LastChildFill="True" HorizontalAlignment="Stretch">
<DockPanel Width="400" LastChildFill="False" HorizontalAlignment="Left">
<Button x:Name="btnRefresh" Content="Refersh"
Height="35" DockPanel.Dock="Bottom" />
<TextBlock Width="400" />
</DockPanel>
<!-- Other UI Elements here? -->
<DockPanel>
I have created a modal WPF window that looks as follows:
Here is the code for the window:
<Window x:Class="Dionysus.Core.Controls.ModalWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ModalWindow" AllowsTransparency="True" Background="Transparent" WindowStyle="None">
<Grid Name="MainGrid">
<Rectangle Fill="Gray" Opacity="0.7" />
</Grid>
The "ErrorControl" is then added as follows:
MainGrid.Children.Add(uc);
The problem is as soon as I expand the stack trace, the controls transparency also changes:
I am assuming this has something to do with the ScrollViewer that uses the incorrect transparency, ie of the Rectangle instead of the containing Window.
I have also set the Opacity of the UserControl which owns the ScrollViewer to 1 and then binded the Opacity:
<ScrollViewer Background="WhiteSmoke" Opacity="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=Opacity}">
Can anyone help me?
--
UPDATE
Here is the code for the UserControl that is inserted into the Window
<Grid x:Name="LayoutRootx" Background="WhiteSmoke">
<StackPanel VerticalAlignment="Stretch">
<TextBlock TextWrapping="Wrap" Margin="5" Text="An error has occured:" Foreground="Black" FontSize="15" FontWeight="Medium"/>
<TextBlock TextWrapping="Wrap" Margin="5,10,5,5" Text="{Binding Error}"/>
<odc:OdcExpander Header="Stack Trace" Margin="5" IsExpanded="False" Background="WhiteSmoke">
<TextBox Text="{Binding StackTrace}" TextWrapping="Wrap" Margin="5,10,5,5" IsReadOnly="True" MaxHeight="370"/>
</odc:OdcExpander>
<odc:OdcExpander Header="Comment" Margin="5" IsExpanded="False">
<TextBox Text="{Binding Comment}" TextWrapping="Wrap" Margin="5,10,5,5" MaxHeight="370" Name="txtComment"/>
</odc:OdcExpander>
<StackPanel Margin="5,10,5,5" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource DionysusButton}" Width="100" Height="23" IsDefault="True" Name="btnSendError">
<StackPanel Orientation="Horizontal">
<Image Source="/Dionysus.Shell;component/Images/camera-icon.png" Margin="0,0,5,0">
</Image>
<TextBlock Text="Send to IT" VerticalAlignment="Center"/>
<core:DionysusTriggerAction Height="0" Width="0" TargetControl="{Binding ElementName=btnSendError}" MethodName="SendError"></core:DionysusTriggerAction>
</StackPanel>
</Button>
<Button Style="{StaticResource DionysusButton}" Width="100" Height="23" Name="btnExit" Margin="10,0,0,0" IsCancel="True">
<StackPanel Orientation="Horizontal">
<Image Source="/Dionysus.Shell;component/Images/DeleteRed.png" Margin="0,0,5,0">
</Image>
<TextBlock Text="Close" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<core:DionysusTriggerAction Height="0" Name="triggerAction2" Width="0" TargetControl="{Binding ElementName=btnExit}" MethodName="Exit"></core:DionysusTriggerAction>
</StackPanel>
</StackPanel>
</Grid>
If your window has a fixed size and cannot be resized, you can use the following trick:
<Grid>
<Border BorderThickness="100" BorderBrush="Gray" Opacity="0.7">
<Grid Background="White" Grid.Column="1" Grid.Row="1" x:Name="contentPlaceHolder">
<TextBlock Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>
However, it is unlikely that your Window will always have the same size, so to make it more dynamic, you could change the layout of the Window as follows:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="YourDesiredSize"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="YourDesiredSize"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="0" Grid.ColumnSpan="3"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="2" Grid.ColumnSpan="3"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="0"/>
<Rectangle Fill="Gray" Opacity="0.7" Grid.Row="1" Grid.Column="2"/>
<Grid Grid.Column="1" Grid.Row="1" Background="White" x:Name="contentPlaceHolder">
<TextBlock Text="HELLO WORLD" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
The result of this window placed on top of another looks more or less like this:
and then instead of adding to the MainGrid, add the UserControl to the contentPlaceHolder or however you want to call it:
contentPlaceHolder.Children.Add(uc);
Okay so I found a solution that works for me, I'm sure it's not the best but it might help someone having the same problem as I did.
The problem was that controls within my UserControl that I added to my Window were transparent, although I could not figure out the reason, I found a simple workaround.
By changing the OpacityMask property of the UserControl to whatever the required Background colour is, even if the controls opacity changes, it will be masked with the Brush that you supply.
uc.OpacityMask = Brushes.WhiteSmoke;
Hope it helps someone!
I would like to reproduce this effect :
How can I do with xaml ?
(note that the text can be variable)
Thanks in advance for your help
You can easily achieve this with a combination of Border and Grid panels:
<Grid Width="200" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center">
<Border BorderThickness="1" BorderBrush="Black" Margin="0,7,0,0">
<TextBlock Text="Lorem Ipsum..." Margin="20"/>
</Border>
<Border Background="White" Margin="10,0,10,0" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Text="My Title" />
</Border>
</Grid>