I'm struggling with Silverlights' activity control. I placed a grid inside the activity control and no matter whether it shows "Loading..." or not, the grid doesn't stretch anymore, only the min-values are applied.
After removing the activity-control everything works fine, againg - but I need to use the ctrl.
Did I do something wrong?
Best regards,
rwh
Code:
<Grid x:Name="LayoutRoot" Style="{StaticResource DetailPageLayoutRoot}">
<activity:Activity IsActive="{Binding IsBusy}">
<Grid ShowGridLines="True" MinWidth="200" MinHeight="200" Background="Bisque" >
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" Width="0.2*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="50" Width="0.8*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="1" Background="Beige">
...
</StackPanel>
<controls:GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Margin="1" Width="4" MinWidth="4" MaxWidth="4"/>
<StackPanel Grid.Column="2" Margin="1" Background="AliceBlue">
...
</StackPanel>
</Grid>
</activity:Activity>
</Grid>
Update:
This control has now(Nov 2009) been incorporated into the Silverlight toolkit. Its been renamed the BusyIndicator. Get it here.
Original Answer:
The latest version of the control fixes this problem.
Download it here: http://www.davidpoll.com/2009/09/14/update-2-displaying-background-activity-in-a-silverlight-ria-application/
I am having the same problem. I think it might be something wrong with the control.
You could set the minwidth/height programmatically.
So innerGrid.minWidth = innerGrid.Parent.Parent.actualwidth;
Not sure if that will work though.
Related
I'm newer in wpf,recently i have a requirement need to create an listbox and when i practice in DataTemplate ,the issue comed.my layout code like below
<ListBox HorizontalAlignment="Stretch" HorizontalContentAlignment="Left">
<ListBoxItem HorizontalAlignment="Stretch">
<Grid ShowGridLines="True" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="2"
Width="200" Height="40" Fill="Gray"/>
</Grid>
</ListBoxItem>
</ListBox>
the begining,i set the width 100 on the first column,because the Rectange's width become to 200,so the first column width become more greater than 100,what happend when the grid to measue the child element?i am confused about it ,because i put the code in an commen state it run normally.any one tell me ,thanks
I'm trying to create a custom expander header that will show one text box on the left, and several others on the right, and as the windows grows horizontally the left and right text blocks get further apart. It feels like this should work, but everything stays left justified.
<Expander.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" Name="LeftJustifiedCol" ></ColumnDefinition>
<ColumnDefinition Width="*" Name="EmptySpaceCol" ></ColumnDefinition>
<ColumnDefinition Width="Auto" Name="RightJustifiedCol" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="5,0,5,0" Text="{Binding GroupByValue}"></TextBlock>
<DockPanel Grid.Column="2" HorizontalAlignment="Right">
<TextBlock DockPanel.Dock="Right" Margin="5,0,5,0" Text="Net: $0.00"></TextBlock>
<Button DockPanel.Dock="Right" Margin="5,0,5,0" Width="Auto" Name="DeleteEntityBtn" Click="DeleteEntityBtn_Click" >Del</Button>
</DockPanel>
</Grid>
</Expander.Header>
any suggestions?
I am guessing WPF isn't rendering the middle column because it contains no content, so it takes up no space in the UI. Perhaps a DockPanel with LastChildFill="False" would work better than a Grid
There is no Grid.SharedSizeGroup in Silverlight 4. What is your workaround for this issue?
For example: I have a DataTemplate for ListBox.ItemTemplate consisting of a grid with two columns and I'd like to have the same width for both columns and the first column needs to have auto width.
Vote for this feature here:
http://dotnet.uservoice.com/forums/4325-silverlight-feature-suggestions/suggestions/1454947-sharedsizegroup
and also here:
http://connectppe.microsoft.com/VisualStudio/feedback/details/518461/sharedsizegroup-should-be-available-in-silverlight
SharedSize Grid with Silverlight - haven't tested it but looks usable.
Shared sizing is best implemented using element property bindings in Silverlight. Just make all your shared sized elements bind to the width/height of another.
EDIT:
I put a quick example of what I mean together. I'm not sure what you mean by using star sizing when you said in the question you want auto sizing -
<Grid Height="400"
Width="600"
Background="Gray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button x:Name="parent"
Content="CHANGE ME TO ADJUST THE COLUMN SIZE"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="Red" />
<Button Width="{Binding ActualWidth, ElementName=parent}"
Grid.Column="1"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="Blue" />
<Button Width="{Binding ActualWidth, ElementName=parent}"
Grid.Column="2"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="Yellow" />
</Grid>
HTH
I am going through the process of designing my first Silverlight application based upon the PivotViewer control from Silverlight 4. I am having problems organizing the bar at the top as per my design:
(source: richard-slater.co.uk)
I have found ways of left aligning the Logo and Title, a way of right aligning the buttons with various combinations of panels however there are two major problems with it.
The XAML looks really really ugly, nesting panels seems to work but doesn't seem like good practice.
I can't seem to find a way of handling resizing the window down without either clipping or overlapping.
I have acheived the best results with the following code:
<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
<Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
<TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</StackPanel>
I intend to move some of the properties into styles, however it still feels messy.
The above code can also result in the following in small windows:
(source: richard-slater.co.uk)
Is there a better way?
If you don't like nesting panels, a Grid might be a better option. With your four elements, have a five column grid like this:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image x:Name="LogoImage"
Height="50"
Width="50"
Source="/EVEMonPivot;component/EVEMonLogoBlue.png"
Grid.Column="0" />
<TextBlock x:Name="TitleText"
Height="50"
Text="EVEMon Pivot"
FontSize="40"
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontWeight="Bold"
Padding="10,0,0,0" />
<Button x:Name="StackExButton"
Grid.Column="4"
Style="{StaticResource NavButton}"
Click="StackExButton_Click">EVE Online StackExchange</Button>
<Button x:Name="BugsButton"
Grid.Column="5"
Style="{StaticResource NavButton}">Bugs & Suggestions</Button>
</Grid>
This sets four columns to Auto-size, so they adjust to the size of your UI elements, and the centre column is Star-sized so it fills the rest of the space between them.
While you can use a star-sized grid column to enforce a collapsible region between the controls, you're still left to account for what happens when there simply isn't enough room (eg. 600 pixels of display in a 400-pixel wide area.) What I think you need is a ScrollViewer, which is a ContentControl that lets you determine when scroll bars appear.
In the markup below I am doing 2 things: First, I am using the Silverlight toolkit's DockPanel to isolate the left and right sections of the display (a very similar thing can be accomplished with a 3-column Grid with Cols 0 and 2 set to "Auto" and Col 1 set to "*", but the specific use of Left and Right in the DockPanel may make the intent more readable.) Second, the whole thing is being wrapped in a ScrollViewer with the HorizontalScrollBarVisibility set to "Auto" - when the contents is too big to fit, put up a scrollbar.
<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SilverlightApplication2.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="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<toolkit:DockPanel >
<StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top" Height="50" Margin="5">
<TextBlock Text="Some long text" FontSize="30"/>
</StackPanel>
<StackPanel toolkit:DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" Height="50" Margin="5">
<Button Content="First Button" Margin="5"/>
<Button Content="Second Button" Margin="5"/>
</StackPanel>
</toolkit:DockPanel>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
I am new to the MVVM design pattern, and I am working on a project to automate shipping processes.
The particular problem that I am having is I have a UserControl (my EditShipmentView) which when it loads, assigns it's ViewModel to its DataContext. The ViewModel is passed a recordID which it uses to pull the entity that represents a shipment. It does this successfully, as I can see it in Mole (visualizer).
Below is a XAML fragment showing the first couple of TextBoxes, and what I thought the bindings should look like.
<local:SnazzyForm Background="#FF318AE1">
<Grid Margin="6,0,0,0">
<TabControl Style="{DynamicResource SnazzyTabControl}" TabStripPlacement="Left" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0,50">
<TabItem Header="Overview" Style="{DynamicResource TransparentTabItems}">
<Grid Margin="6,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel DataContext="{Binding Path=ShipmentRecord}">
<TextBlock HorizontalAlignment="Left" Text="Contact Info" TextWrapping="Wrap" Style="{DynamicResource TitleText}"/>
<Path Fill="#FFFFB900" Stretch="Fill" HorizontalAlignment="Left" Width="200" Height="2" Data="M0,16.5 L278.5,16.5" Stroke="#FFFFB900"/>
<StackPanel Margin="0,10,0,0">
<Grid Margin="0,16,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".40*"/>
<ColumnDefinition Width=".60*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Text="Company" TextWrapping="Wrap" VerticalAlignment="Top" Style="{DynamicResource FieldLabel}" TextAlignment="Right" Margin="0,2,9,0"/>
<TextBox Text="{Binding Path=CompanyName, Mode=TwoWay, UpdateSourceTrigger=LostFocus, NotifyOnValidationError=True, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" TextWrapping="Wrap" d:LayoutOverrides="Height" Grid.Column="1"/>
</Grid>
<Grid Margin="0,16,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".40*"/>
<ColumnDefinition Width=".60*"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Right" Text="Contact" TextWrapping="Wrap" VerticalAlignment="Top" Style="{DynamicResource FieldLabel}" TextAlignment="Right" Margin="0,2,9,0"/>
<TextBox Grid.Column="1" Text="{Binding Path=ContactName}" TextWrapping="Wrap" d:LayoutOverrides="Height"/>
</Grid>
So, to recap...
EditShipmentView (Inherits from SnazzyForm)
DataContext is EditShipmentViewModel
EditShipmentViewModel.ShipmentRecord is populated (successfully) with a shipment object
ShipmentRecord.CompanyName is a string which obviously should return the name of a company.
Keep in mind this is only my most recent attempt. Previously I have not bound the Stackpanels DataContext and had the Textboxes bound as such "{Binding Path=ShipmentRecord.CompanyName}", and what seems like a hundred different variations. What hair I have left is rapidly receding. Please, think of my hair, send help.
Cory
Show us your code? Chances are your view model is just not notifying the view when it changes. If your bindings are incorrect (not resolved) you will see output to that effect in Visual Studio's debug output window. Check that as well.
Make sure that EditShipmentViewModel (likely culprit) and ShipmentRecord implement INotifyPropertyChanged.
If the data is loaded after the initial view is setup, and the EditShipmentViewModel class doesn't raise a PropertyChanged event for ShipmentRecord, then the View (xaml) will never know to update the binding, and you'll see an empty string.