I have created my first Expression Blend page. It looks flat and dull. WIthout going overboard, how do I add a touch of depth to this page.
http://i67.photobucket.com/albums/h292/Athono/looks%20like%20poo_zps3wt7phoj.png
I have changed it so that the LayoutRoot has a grey background and I have changed the textboxes like so:
<Border BorderBrush="#FF121111" BorderThickness="2" Grid.Row="0" Margin="90,194,192,0" Height="45" VerticalAlignment="Top" Background="White">
<TextBlock Height="33" Margin="6,6,6,0" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="Black" d:LayoutOverrides="HorizontalAlignment"/>
</Border>
But the textboxes still do not have the 3d depth that typical areas that ask for user input have. For example, if you click to open a file in most programs, the area to add a file name looks as if it is more depressed (pushed down) so that the top of the box is defined and has a thicker line than the bottom of the text box.
I have a nother, simpler question that is related to this. How do I do a test run of the page in Expression Blend to see how it performs and looks when I do a mouse over and mouse click on the controls?
Related
I have an app with a dropdownbutton flyout. I'm migrating the XAML over to a new project and the dropdownbutton is behaving differently. In the first instance, the dropdown flyout would be alligned to the left edge of the button (what I want it to do). In the second instance, it is aligned to the right edge of the button and contained within the apps window.
XAML
<DropDownButton ToolTipService.ToolTip="File"
VerticalAlignment="Top"
HorizontalAlignment="Left" Background="Transparent"
Style="{StaticResource CommandBarFlyoutEllipsisButtonStyle}"
Height="33"
FontFamily="Segoe MDL2 Assets" Content="">
<DropDownButton.Flyout>
<MenuBarItemFlyout Placement="LeftEdgeAlignedTop">
<MenuFlyoutItem Text="Open File" Icon="OpenFile" Tag="Open File"
Click="OpenLocalFile"/>
</MenuBarItemFlyout>
</DropDownButton.Flyout>
</DropDownButton>
First app (how I want it to look)
Second app
There are a number of differences between the two apps but the xaml is almost identical. I can't seem to pinpoint what could cause this fly out to behave differently. Thanks for any help you can provide!
We have put a scroll viewer inside a content panel in design page of a databound app. We have to add more number of textblocks inside the scrollviewer which we cannot do by dragging and dropping from the toolbar as the design shows only three textblocks...
You can add the textboxes manually and specify it's margin. You don't need to drag and drop. For example:
<Grid x:Name="Content Panel">
<ScrollViewer>
<TextBox x:Name="textbox_1" Margin="10,0,0,0"/>
<TextBox x:Name="textbox_2" Margin="10,10,0,0"/>
<TextBox x:Name="textbox_3" Margin="10,20,0,0"/>
<TextBox x:Name="textbox_4" Margin="10,30,0,0"/>
..and so on.
Margin parameters are Left, Top, Right and Bottom. Keep increasing the top margin to push the control below.
In my app I have a list box that contains a stack panel with text block items. The text block items have a text wrapping or text trimming property to avoid that the text block items slide outside the visible range.
As far as I know the text wrapping and text trimming property need a fixed width to insert a line break. For this reason, I set a fixed width for the title (Width="456") and for the description (Width="432"):
<ListBox x:Name="CategoryList" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel>
<TextBlock
Style="{StaticResource PhoneTextLargeStyle}"
Text="{Binding Name}"
TextTrimming="WordEllipsis"
Width="456"
/>
<TextBlock
Style="{StaticResource PhoneTextSubtleStyle}"
Margin="12,-6,12,0"
Text="{Binding ContentDescription}"
TextWrapping="Wrap"
Width="432"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem now is that when I turn the phone, the fixed width for the horizontal mode is too small. Is there a way to put in place of the fixed width a width depending on the device width?
Screenshot:
in general its never a good idea in XAML to use fixed width/height (for "whole" page(100%)) since XAML was designed to do this job for you, so you might concentrate on your layout and the technology covers the aspect of different screens and sizes.
So, if you use a fixed width to display sth. on the whole page its a very good indicator that something is wrong.
In your case you've got the use of StackPanels wrong. StackPanels are designed in a way, that their size is not limited in the direction of their orientation. This means, a StackPanel that has got its orientation set to horizontal might grow indefinetely in width and a sp with orientation set to vertical wouldn't be limited in its height.
Now this leads us to your problem: you have used an indefintely-in-width-growing element in an indefinetely-in-height-growing element (two stackpanels).
Even though you might by some tricks limit their size (e.g. that could be achieved by some data bindings), this isn't what should be done.
I'd say - since in the parent StackPanel nothing is stacking - substitute it with some other panel/container (or just remove it) and your problem will be gone.
Example
<DataTemplate>
<!-- If you need more child elements uncomment the following line -->
<!-- <Grid> -->
<StackPanel Margin="0,0,0,17">
<TextBlock ... />
<!-- no need to set width on the following textblock -->
<TextBlock ... TextWrapping="Wrap" />
</StackPanel>
<!-- </Grid> -->
</DataTemplate>
I am developing a Windows 8 Metro application whose layout is pretty simple. It consists of a single page with a WrapGrid enclosed in an ItemsControl, which is in turn enclosed in a ScrollViewer. This is the XAML code of the application main page:
<Page ...>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="MainGrid" Margin="120,140,32,0">
<ScrollViewer x:Name="ScrollView"
VerticalScrollBarVisibility="Auto"
HorizontalAlignment="Stretch">
<ItemsControl x:Name="itemsControl" HorizontalAlignment="Stretch">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
HorizontalChildrenAlignment="Stretch"
Margin="0"
HorizontalAlignment="Center">
<WrapGrid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition />
<RepositionThemeTransition />
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
<Page.BottomAppBar>
...
</Page.BottomAppBar>
</Page>
There is also an user control of which new instances are created and added to the ItemsControl programmatically when the user clicks on a certain button in the application bar. As expected by the fact of using a WrapGrid, the control instances are stacked sequentially in a single row until there is no more room in the screen, at which point they appear in a new row and it is necessary to scroll down in order to see them. So far so good.
Now I want to implement a feature and I don't know how to achieve it. What I want is the following: when the user zooms out in the application, causing the controls to appear smaller, I want the new available space to be used so that more controls can be displayed per row; instead, the current behavior is that the ItemsControl itself is reduced and the extra surrounding space is unused.
For example, imagine that the user adds 10 controls. There is room for 4 controls in one row, so that 3 rows of controls are displayed, with 4, 4 and 2 controls. If the user zooms out and now there is room for 7 controls in a row, I want the ItemsControl to rearrange itself so that now there are only two rows with 7 and 3 controls. How could I achieve this?
I hope I have explained myself properly. Please don't hesitate to ask if my question is not clear enough. Thank you very much!
I have a [silverlight] WizardContainer control that hosts a number of wizard pages. The wizard fits nicely on its host form. If the page has narrow content it doesn't expand to fill the container. So I set HorizontalContentAlignment to Stretch. This works.
However if the wizard page contains a datagrid with lots of columns it stretches the page instead of autoscrolling itself - as its width is not fixed. If the following XAML is on a usercontrol with a width of 350 I want the grid to be 350 and have its own scrollbars. If the WizardContainer is made smaller than the page minwidth then the MainScroller should come into play.
<Grid x:Name="LayoutRoot" >
<ScrollViewer x:Name="MainScroller" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<ContentControl Margin="4" x:Name="WizardContainer" HorizontalContentAlignment="Stretch">
<Grid Background="Red" x:Name="WizardPage" MinWidth="300">
<sdk:DataGrid HorizontalAlignment="Left" Height="120" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</ContentControl>
</ScrollViewer>
</Grid>
Note if I fix the width of the datagrid everything in this XAML works. But I want the grid to expand as the user resizes the form containing the wizardcontainer.
You have the DataGrid wrapped in ScrollViewer. This, effectively, tells the DataGrid that it has infinite available width. Since the DataGrid is not constrained, it'll take as much width as it's columns desire.
You can set HorizontalScrollBarVisibility="Disabled"if that fits your design (i.e. you need only vertical scrolling from your ScrollViewer). This will disable scrolling horizontally and will constrain the DataGrid on the horizontal axis.
DataGrid has a ScrollViewer in it's ControlTemplate. As a broad general rule: try avoiding a ScrollViewer-in-a-ScrollViewer situations. It's (almost) always a headache to debug and eventually you'll have to set something as a fixed size (or calculate the size on the fly).