I'm playing around with WPF and I'm trying to create an ImageButton control. I've created a UserControl as follows:
<UserControl
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="WpfPractise.Controls.ImageButton"
Height="auto" Width="auto" x:Name="ImageButtonControl">
<Button>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Image Source="{Binding Image, ElementName=ImageButtonControl}"
Width="16" Height="16"
Margin="5,0,0,0" VerticalAlignment="Center"/>
<TextBlock Text="{Binding Text, ElementName=ImageButtonControl}"
Margin="5,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Button>
This is working fine except for the StackPanel doesn't stretch to fill the width or the height! I've tried a Grid in it's place but to no avail. Any ideas where I'm going wrong?
Example:
If you want to align the Button content to the left then you have to set the HorizontalContentAlignment of the button
<Button HorizontalContentAlignment="Left" VerticalContentAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Image Source="{Binding Image, ElementName=ImageButtonControl}"
Width="16" Height="16"
Margin="5,0,0,0" VerticalAlignment="Center"/>
<TextBlock Text="{Binding Text, ElementName=ImageButtonControl}"
Margin="5,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Button>
Related
I want to display a large image in a Window where the Image will have scroll bars if it too big for the area of the screen it is in.
Underneath the image I want a button panel. For this I have put the Image inside a ScrollViewer in a DockPanel that contains a StackPanel to contain the Buttons in the Bottom part. The idea is to click the Browse button to set the image (from code behind handling Button Click)
The following example I put together will just keep the image size (2144 x 1424) and I cannot see the lower button panel.
<Window x:Class="WpfIssues.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:WpfIssues"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<DockPanel>
<TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top"></TextBlock>
<StackPanel Orientation="Vertical">
<DockPanel x:Name="PhotoPanel">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Click="Button_Click">Browse...</Button>
</StackPanel>
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<StackPanel>
<Image x:Name="PhotoImage"
Stretch="None"
Source="Resources/bear grills.png"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</StackPanel>
</ScrollViewer>
</DockPanel>
</StackPanel>
</DockPanel>
</Grid>
</Window>
I cant figure out why.
Try putting the button before the scrollviewer, like this:
<DockPanel>
<TextBlock Text="Test Image" FontSize="30" DockPanel.Dock="Top" />
<Button Content="Browse..." DockPanel.Dock="Bottom" />
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image x:Name="PhotoImage"
Stretch="None"
Source="http://images6.fanpop.com/image/photos/33600000/Bear-Grylls-bear-grylls-33656894-3504-2336.jpg"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</ScrollViewer>
</DockPanel>
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.
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 have a WPF UserControl with a textbox. Here's how the textbox and it's parent control are defined:
<DockPanel Margin="10,20,10,10" FocusManager.FocusedElement="{Binding ElementName=uxJobNumber}" >
<TextBox x:Name="uxJobNumber" Text="{Binding JobNumber, Mode=TwoWay, ValidatesOnDataErrors=True}" TextWrapping="Wrap" FontSize="48" BorderBrush="Black" BorderThickness="1" Margin="10"/>
</DockPanel>
With the FocusManager.FocusedElement set, I can see a cursor bar present within the textbox. However, the cursor bar is not blinking, and does not allow the user to immediately start typing.
Without the FocusManager.FocusedElement set, when the application starts there is no cursor bar within the text box at all.
Here's the complete XAML
<UserControl x:Class=""
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:converters="clr-namespace:.Modules.Converters"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
xmlns:extToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit/extended"
mc:Ignorable="d">
<UserControl.Resources>
<converters:VisibilityConverter x:Key="Visibility" />
</UserControl.Resources>
<Canvas Width="1024" Height="768" >
<Border Style="{DynamicResource GroupBox}" Canvas.Left="36.261" Canvas.Top="32.131" Width="426.936">
<StackPanel>
<Border>
<TextBlock Text="STEP 1"/>
</Border>
<TextBlock Text="Enter the five (5) digit Job Number and click Verify." />
<Path/>
<DockPanel Margin="10,20,10,10" FocusManager.FocusedElement="{Binding ElementName=uxJobNumber}" >
<Button Content="Verify" Width="125" Height="65" HorizontalAlignment="Right" Command="{Binding SearchJobCommand}" Style="{DynamicResource RedButton}" Margin="0" DockPanel.Dock="Right" IsDefault="True"/>
<TextBox Text="{Binding JobNumber, Mode=TwoWay, ValidatesOnDataErrors=True}" TextWrapping="Wrap" FontSize="48" BorderBrush="Black" BorderThickness="1" x:Name="uxJobNumber" Margin="10" KeyboardNavigation.TabIndex="0" />
</DockPanel>
</StackPanel>
</Border>
<TextBlock Text="{Binding Error}" Visibility="{Binding HasError, Converter={StaticResource Visibility}}" Canvas.Left="48" Canvas.Top="288" FontSize="16" Width="403" Foreground="Red" />
</Canvas>
We finally resorted to using the Focus() method in the code behind when the form is done loading.
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
uxJobNumber.Focus();
}
Using your code I get this to work; blinking and all.
Notice how the textbox expands to the right until it has enough horizontal space to fit the content? Well I'd like it to not expand and fit the text with the space it has in the window.
If the windows expands, then the Grid.Column it's in will expand, but the textbox itself should expand to fit. Simple enough?
Any suggestions? This is my first foray into WPF and so far it's been pretty sleek.
Edit: Here's my XAML markup:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding ImageUrl}" Stretch="Fill"/>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Text="{Binding Synopsis}" MinHeight="76" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
To get a TextBox to wrap inside a ListBox you can make the following changes:
Set the content of the listbox equal to the width of the listbox using: HorizontalContentAlignment="Stretch".
Disable the horizontal scrollbar of the listbox to prevent listbox from getting the desired size of the controls and preventing the word wrap in your textbox.
Set TextWrapping="Wrap" in the TextBox
Here is the XAML:
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch" >
</ListBox>
<TextBox Text="{Binding Synopsis}" MinHeight="76" TextWrapping="Wrap" />
I believe you need to set the Margin property of your textbox control. In the designer, you can see little circles around each textbox (and each control when you focus them, for that matter). Click the little circle on the right side of the textbox, to make that control grow marginally with the available space in the current layout control (by clicking the circle, the margin will be added into the XAML).
I don't know if in your image you've already adjusted the window size, but with that image it appears you'll also need to set the width for your textbox.
Does this help?