I am using WPF for a Visual Studio WPF 2008 project that uses 3.5 of the .NET framework. I am new to both WPF and especially Expression Blend 3, which I'm trying to design the user interface with. I have defined a nice 2-color gradient background for the main window. It displays nicely with the following XAML code when there are no menu definitions:
<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"
x:Class="XYZZY.MainWindow"
x:Name="Window"
Title="XYZZY Lobby" HorizontalAlignment="Center"
Width="796" Height="480" mc:Ignorable="d">
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF434D7A" Offset="0"/>
<GradientStop Color="#FF180CFA" Offset="1"/>
</LinearGradientBrush>
</Window.Background>
<Grid x:Name="LayoutRoot" Width="764">
<Path Fill="Black" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" Margin="-227,0,0,184" VerticalAlignment="Bottom" Width="1" Height="1" Data="M-227,256"/>
<ListView HorizontalAlignment="Left" Width="239" Margin="0,148,0,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Game" />
<GridViewColumn Width="60" Header="Stakes" />
<GridViewColumn Width="35" Header="Seats" />
</GridView>
</ListView.View>
</ListView>
<ListView Margin="239,148,218,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Table" />
<GridViewColumn Width="15" Header="Players" />
<GridViewColumn Width="60" Header="Buy-in" />
<GridViewColumn Width="50" Header="Speed" />
<GridViewColumn Width="25" Header="H/Hr" />
<GridViewColumn Width="35" Header="Avg Pot" />
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
<ListView Margin="546,148,0,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Player" />
<GridViewColumn Width="60" Header="City" />
<GridViewColumn Width="35" Header="Chips" />
</GridView>
</ListView.View>
</ListView>
<TextBlock x:Name="LobbyServerLabel" HorizontalAlignment="Left" VerticalAlignment="Bottom" TextWrapping="Wrap" Text="Lobby Server - not connected"/>
<TextBlock x:Name="GameServerLabel" HorizontalAlignment="Center" VerticalAlignment="Bottom" TextWrapping="Wrap"><Run Text="Game Server - not connected"/></TextBlock>
<Label x:Name="SkinName1" Margin="8,54,0,0" VerticalAlignment="Top" Content="XYZZY" FontSize="36" Foreground="#FFD23C32" HorizontalAlignment="Left" FontFamily="Georgia" FontWeight="Bold"/>
<Label x:Name="SkinName2" Margin="182.405,54,459,0" VerticalAlignment="Top" Content="A A" FontSize="36" Foreground="#FFD23C32" FontFamily="Georgia" FontWeight="Bold"/>
<Image VerticalAlignment="Top" Width="41.81" Height="51.519" Source="Spade1.png" Stretch="Fill" Margin="136.595,53.384,585.595,0"/>
</Grid>
</Window>
But, once I add a menu, the background color of the menu seems to take over the background color of the rest of the window. Here is the same code with the menu definitions:
<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"
x:Class="AttackPoker2.MainWindow"
x:Name="Window"
Title="Attack Poker Lobby" HorizontalAlignment="Center"
Width="796" Height="480" mc:Ignorable="d">
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF434D7A" Offset="0"/>
<GradientStop Color="#FF180CFA" Offset="1"/>
</LinearGradientBrush>
</Window.Background>
<Grid x:Name="LayoutRoot" Width="764">
<Path Fill="Black" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" Margin="-227,0,0,184" VerticalAlignment="Bottom" Width="1" Height="1" Data="M-227,256"/>
<Menu>
<MenuItem Header="File">
<MenuItem Header="New"></MenuItem>
<MenuItem Header="Open"></MenuItem>
<MenuItem Header="Save"></MenuItem>
<Separator></Separator>
<MenuItem Header="Exit"></MenuItem>
</MenuItem>
<MenuItem Header="Edit">
<MenuItem Header="Undo"></MenuItem>
<MenuItem Header="Redo"></MenuItem>
<Separator>
<Separator.Template>
<ControlTemplate>
<Border CornerRadius="2" Padding="5" BorderBrush="Black" BorderThickness="1" Background="PaleGoldenrod">
<TextBlock FontWeight="Bold">
Editing Commands
</TextBlock>
</Border>
</ControlTemplate>
</Separator.Template>
</Separator>
<MenuItem Header="Cut"></MenuItem>
<MenuItem Header="Copy"></MenuItem>
<MenuItem Header="Paste"></MenuItem>
</MenuItem>
</Menu>
<ListView HorizontalAlignment="Left" Width="239" Margin="0,148,0,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Game" />
<GridViewColumn Width="60" Header="Stakes" />
<GridViewColumn Width="35" Header="Seats" />
</GridView>
</ListView.View>
</ListView>
<ListView Margin="239,148,218,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Table" />
<GridViewColumn Width="15" Header="Players" />
<GridViewColumn Width="60" Header="Buy-in" />
<GridViewColumn Width="50" Header="Speed" />
<GridViewColumn Width="25" Header="H/Hr" />
<GridViewColumn Width="35" Header="Avg Pot" />
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
<ListView Margin="546,148,0,45">
<ListView.View>
<GridView>
<GridViewColumn Width="90" Header="Player" />
<GridViewColumn Width="60" Header="City" />
<GridViewColumn Width="35" Header="Chips" />
</GridView>
</ListView.View>
</ListView>
<TextBlock x:Name="LobbyServerLabel" HorizontalAlignment="Left" VerticalAlignment="Bottom" TextWrapping="Wrap" Text="Lobby Server - not connected"/>
<TextBlock x:Name="GameServerLabel" HorizontalAlignment="Center" VerticalAlignment="Bottom" TextWrapping="Wrap"><Run Text="Game Server - not connected"/></TextBlock>
<Label x:Name="SkinName1" Margin="8,54,0,0" VerticalAlignment="Top" Content="Attack" FontSize="36" Foreground="#FFD23C32" HorizontalAlignment="Left" FontFamily="Georgia" FontWeight="Bold"/>
<Label x:Name="SkinName2" Margin="182.405,54,459,0" VerticalAlignment="Top" Content="Poker" FontSize="36" Foreground="#FFD23C32" FontFamily="Georgia" FontWeight="Bold"/>
<Image VerticalAlignment="Top" Width="41.81" Height="51.519" Source="Spade1.png" Stretch="Fill" Margin="136.595,53.384,585.595,0"/>
</Grid>
</Window>
I have tried moving the menu definition around, but that does not help. Can someone please explain how I can specify in Expression Blend 3 or with C# code to make the background color of the menu apply to only the menu and not to anything else?
Pretty easy to solve. In Blend 3. under the Layout tab, there is a horizontal alignment and vertical alignment property. Both of these were set to stretch. Have no idea how they got that way. But, in any case they should be set to Left and Top respectively. That puts the menu in the top left hand corner and solves the problem of the menu trying to take control of the background color of the entire window.