I'm developing a windows phone application. I'm new in WP7 app development. In my app I'm using an usercontrol and I have changed it's background image through following process shown in my code. But the background image is not changing. Can anyone help me ?
Here is my code snippet :
<Grid>
<Image Source="\assests\backgroungimages\appBackground2.jpg" Stretch="UniformToFill"/>
<StackPanel x:Name="LayoutRoot" Width="480" Height="306" Background="Black">
<TextBlock x:Name="ApplicationTitle" Text="Sign In" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#CBF7FA" FontSize="30"/>
<toolkit:PhoneTextBox Hint="UserName" Name="txtUsername" Width="auto" HintStyle="{StaticResource HintCustomStyle}"></toolkit:PhoneTextBox>
<toolkit:PhoneTextBox Hint="Password" Name="txtPassword" Width="auto" HintStyle="{StaticResource HintCustomStyle}"></toolkit:PhoneTextBox>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="Sign In" Name="btnSignIn" Width="auto" Grid.Column="0" Grid.Row="0">
<Button.Background>
<ImageBrush ImageSource="\assests\backgroungimages\btnImage.jpg" Stretch="UniformToFill"></ImageBrush>
</Button.Background>
</Button>
<Button Content="Cancel" Name="btnCancel" Width="auto" Grid.Column="1" Grid.Row="0">
<Button.Background>
<ImageBrush ImageSource="\assests\backgroungimages\btnImage.jpg" Stretch="UniformToFill"></ImageBrush>
</Button.Background>
</Button>
</Grid>
</StackPanel>
</Grid>
Set grid background to
<Grid.Background>
<ImageBrush ImageSource="\assests\backgroungimages\appBackground2.jpg"/>
</Grid.Background>
Related
I have a very basic layout, but still not able to get the behaviour I want. Stupid me...
My grid has two columns, dynamic sized column left and fixed sized column right. This is working. Inside the right column I have stackpanel containing two buttons, they follow the window resizing correctly.
Inside the left column I have dockpanel containing two groupboxes, the lower has fixed height and is docked to the bottom. This groupbox follows the window resizing correctly, just like I want.
But I'm not able to get the upper groupbox to fill the upper section of the dockpanel. I can only set its height as fixed or when setting it "Auto" it gets strange height of 23...? I want it to fill the area and follow window resizing. I tried using stackpanel also in this column, but no success.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<DockPanel x:Name="GroupPanel" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<GroupBox x:Name="AlarmGroup" Header="Alarms" Margin="10" DockPanel.Dock="Top" />
<GroupBox x:Name="LogGroup" Header="Log" Height="188" Margin="10" VerticalAlignment="Bottom" />
</DockPanel>
<StackPanel x:Name="ButtonPanel" Width="190" Grid.Column="1">
<Button x:Name="StartButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,20,10,0">Start</Button>
<Button x:Name="StopButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,10,10,0">Stop</Button>
</StackPanel>
</Grid>
By default, DockPanel fills its remaining space with its last child.
You've set the AlarmGroup GroupBox as the first child, so it takes up only the space it needs; it's default. The second child has a fixed height, so it does not take up the remainder of the space.
To achieve the layout you are looking for, move LogGroup to be the first child of GroupPanel and set its DockPanel.Dock property to Bottom.
Example
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<DockPanel x:Name="GroupPanel">
<GroupBox x:Name="LogGroup" Header="Log"
DockPanel.Dock="Bottom"
Height="188" Margin="10"/>
<GroupBox x:Name="AlarmGroup" Header="Alarms"
DockPanel.Dock="Top"
Margin="10"/>
</DockPanel>
<StackPanel x:Name="ButtonPanel"
Width="190"
Grid.Column="1">
<Button x:Name="StartButton"
Width="150" Height="40"
VerticalAlignment="Top"
Margin="0,20,10,0">Start</Button>
<Button x:Name="StopButton"
Width="150" Height="40"
VerticalAlignment="Top"
Margin="0,10,10,0">Stop</Button>
</StackPanel>
</Grid>
Result
Is this working for you ?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<DockPanel x:Name="GroupPanel" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<GroupBox x:Name="LogGroup" Header="Log" Height="188" Margin="10" DockPanel.Dock="Bottom"/>
<GroupBox x:Name="AlarmGroup" Header="Alarms" Margin="10" DockPanel.Dock="Top" />
</DockPanel>
<StackPanel x:Name="ButtonPanel" Width="190" Grid.Column="1">
<Button x:Name="StartButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,20,10,0">Start</Button>
<Button x:Name="StopButton" DockPanel.Dock="Right" Width="150" Height="40" VerticalAlignment="Top" Margin="0,10,10,0">Stop</Button>
</StackPanel>
</Grid>
In a DockPanel there is a property LastChildFill set to true by default which means that the last coltrol you put will take all the space. I also changed VerticalAligment="Bottom" to DockPanel.Dock="Bottom"
Depending on the screen size, Log and Alarm screens get smaller equally. I tried to do it by dividing it into partitions in a Grid. Is it enough for you ?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="220"/>
</Grid.ColumnDefinitions>
<Grid x:Name="GroupPanel" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="10"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<GroupBox x:Name="LogGroup" Header="Log" Grid.Column="0" Grid.Row="0" Margin="10"/>
<GroupBox x:Name="AlarmGroup" Header="Alarms" Grid.Column="0" Grid.Row="2" Margin="10"/>
</Grid>
<StackPanel x:Name="ButtonPanel"
Width="190"
Grid.Column="1">
<Button x:Name="StartButton"
Width="150" Height="40"
VerticalAlignment="Top"
Margin="0,20,10,0">Start</Button>
<Button x:Name="StopButton"
Width="150" Height="40"
VerticalAlignment="Top"
Margin="0,10,10,0">Stop</Button>
</StackPanel>
</Grid>
EDIT
Having removed the <ViewBox Stretch="UniformToFill"> from the xaml, it renders better - the size of the controls are more appropriate, however, as the Frame is empty when I'm loading the window, the whole app appears as a band across the center of my screen.
When I do load content into the frame, the rest of the window fits width to the frame, rather than to the screen resulting in empty space on the left and right of the Frame's content.
ORIGINAL QUESTION
I've never done a fluid layout before so what I've done is based entirely on what I've gleaned from answers to other questions on SO and around the interwebz.
So the following XAML, I figured, should be "responsive" which is to say that it would render much the same on every screen resolution without using fixed widths.
Unfortunately, the controls are rendering at enormous scale. What should be a 30x30 button looks to be rendering around 10x that size (see the screenshots below - the second one is the app maximized to fullscreen).
How can I change my xaml to make these controls render to the row heights and to the width of the display?
<Grid>
<Viewbox Stretch="UniformToFill">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Titlebar -->
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Background="#2d2d30">
<StackPanel Name="spTitlebar1" FlowDirection="LeftToRight" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
<Label Name="lblTitle" HorizontalAlignment="Left" BorderThickness="0" Foreground="White">IHS Towers SCADA</Label>
</StackPanel>
<StackPanel Name="spTitleBar2" FlowDirection="RightToLeft" Orientation="Horizontal" MouseDown="spTitlebar_MouseDown">
<Button Name="btnClose" Content="X" Click="btnClose_Click" Style="{StaticResource TitleButton}" />
<Button Name="btnMinimize" Content="_" Click="btnMinimize_Click" Style="{StaticResource TitleButton}" />
<Border BorderThickness="1,0,0,0" BorderBrush="#686868">
<Button Name="btnSettings" Click="btnSettings_Click" Style="{StaticResource TitleButton}" ToolTip="Settings">
<Image Source="Images/settings-icon.png" Height="20" Width="20"/>
</Button>
</Border>
<Button Name="btnReports" Click="btnReports_Click" Style="{StaticResource TitleButton}" ToolTip="View reports">
<Image Source="Images/reports-icon.png" Height="20" Width="20"/>
</Button>
</StackPanel>
</StackPanel>
<!-- Towers Bar across the top Height="50" -->
<StackPanel Grid.Row="1" Grid.Column="0" Name="spTowers" Background="#2d2d30" VerticalAlignment="Top" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,0">
<Border BorderThickness="5,0,0,0" BorderBrush="#686868" VerticalAlignment="Top"></Border>
</StackPanel>
<!-- Alert Window in the center -->
<Frame Name="frmBody" Grid.Row="2" Grid.Column="0" Margin="0" Background="#1e1e1e" NavigationUIVisibility="Hidden" />
<!-- Actions Bar across the bottom Height="60" -->
<StackPanel Grid.Row="3" Grid.Column="0" Name="spActions" Height="60" Background="#2d2d30" VerticalAlignment="Top" FlowDirection="RightToLeft" Orientation="Horizontal">
<Button Name="btnSMS" Click="btnSMS_Click" Height="30" Width="66" Margin="10,10,10,10" Style="{StaticResource RoundedButtonGreen}">Send SMS</Button>
</StackPanel>
</Grid>
</Viewbox>
</Grid>
i am win form developer. whenever i want to set any control at top/Bottom/Left/Right position in its container then we just play the controls dock property in winform. so just guide me how can i place a control in its container top/Bottom/Left/Right position in such a way as a result when contain size change then control position will not change in wpf.
after searching google i came to know how filling works with Dock property and it is like
<Window ...Other window props... >
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<!-- Canvas items here... -->
</Canvas>
</Window>
So guide me how to set any control at top/Bottom/Left/Right position in its container with code snippet.
UPDATE
i just come to know dock panel can be use for my requirement like this way
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>
any other way can i achieve this without using DockPanel. thanks
You can use a Grid, (note the star sizing)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- If not specified, then Grid.Column="0" Grid.Row="0" are defaults-->
<Button Content="Dock=Top" Grid.ColumnSpan="3"/>
<Button Content="Dock=Bottom" Grid.Row="2" Grid.ColumnSpan="3"/>
<Button Content="Dock=Left" Grid.Row="1"/>
<Button Content="Dock=Right" Grid.Column="2" Grid.Row="1" />
<Button Content="LastChildFill=True" Grid.Column="1" Grid.Row="1"/>
</Grid>
You can use margins and alignments (margins are approximate here)
<Grid>
<Button Content="Dock=Top" VerticalAlignment="Top"/>
<Button Content="Dock=Bottom" VerticalAlignment="Bottom"/>
<Button Content="Dock=Left" HorizontalAlignment="Left" Margin="0,35"/>
<Button Content="Dock=Right" HorizontalAlignment="Right" Margin="0,35" />
<Button Content="LastChildFill=True" Margin="75,35"/>
</Grid>
You can use StackPanels (this one needs more work to make it fill the space)
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Content="Dock=Top" />
<StackPanel Orientation="Horizontal" >
<Button Content="Dock=Left" />
<Button Content="LastChildFill=True" />
<Button Content="Dock=Right" />
</StackPanel>
<Button Content="Dock=Bottom" />
</StackPanel>
<DockPanel>
<Button DockPanel.Dock="Left" Content="Left"></Button>
<Button DockPanel.Dock="Right" Content="Right"></Button>
<Button DockPanel.Dock="Top" Content="Top"></Button>
<Button DockPanel.Dock="Bottom" Content="Bottom"></Button>
<Button DockPanel.Dock="Left" Content="Center" HorizontalAlignment="Center"></Button>
</DockPanel>
I am trying to set the tab index to follow against the order of visual appearance. Meaning the buttons that appears at the top of the window gets focused first when I specifically set it not to.
Here's how the controls are structured;
DocPanel
|
|---- DockPanel
| |----- Button
| |----- Button
| |----- Button
|
|---- Grid
|----- Canvas
|---- TabControl
|------ TextBox
|------ ComboBox
The Tab Order I want;
Canvas
TextBox
ComboBox
3 buttons
Currently order is;
3 buttons
TextBox,
ComboBox
Canvas.
I tried setting KeyboardNavigation.TabNavigation="Local" for the outer DockPanel.
Then I set TabNavigation.TabIndex and TabIndex to the number that I want but that's not working.
If controls appear visually at the top of windows, is it not possible to change the tab index to focus after the controls appearing at the bottom?
Here's my XAML:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" KeyboardNavigation.TabNavigation="Local">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" KeyboardNavigation.TabIndex="4" TabIndex="4"/>
<Button Content="Forward" KeyboardNavigation.TabIndex="5" TabIndex="5" />
<Button Content="Delete" KeyboardNavigation.TabIndex="6" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1" KeyboardNavigation.IsTabStop="True" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" KeyboardNavigation.TabIndex="2" TabIndex="2" />
<ComboBox TabIndex="3" KeyboardNavigation.TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>
You can set your XAML to;
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=pic}"
Title="Window1" Height="504" Width="929">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<DockPanel DockPanel.Dock="Top" Height="30">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Save and Close" TabIndex="4"/>
<Button Content="Forward" TabIndex="5" />
<Button Content="Delete" TabIndex="6" />
</StackPanel>
</DockPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50"/>
<ColumnDefinition MinWidth="500"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Border BorderBrush="Aqua" BorderThickness="2" >
<Canvas x:Name="pic" Grid.Column="0" Grid.Row="0" Focusable="True" >
<Canvas.Background>
<ImageBrush ImageSource="bookcover.jpg" Stretch="Fill"/>
</Canvas.Background>
</Canvas>
</Border>
<TabControl x:Name="tabs" Grid.Column="2" Grid.Row="0">
<TabItem Header="Fax Details" IsTabStop="False">
<StackPanel>
<TextBox Name="fdCustomerFileNumber" HorizontalAlignment="Left" Height="30" TabIndex="2" />
<ComboBox TabIndex="3" Width="165" HorizontalAlignment="Left" Height="22" VerticalAlignment="Center" Name="fdDocType" IsEditable="False" />
</StackPanel>
</TabItem>
</TabControl>
</Grid>
</DockPanel>
</Window>
Then in your code behind, in the New Sub, simply set the focus to the Canvas;
pic.Focus;
I have a grid, and I need to have a control as background of this grid. This control will be a progressbar, but it's my problem how to create it.
I can't find how can I set a control as background of grid.
Have you got any experience with this kind of problem?
<DataTemplate x:Key="TodoItemWeeklyTemplate">
<Grid MinWidth="800" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" />
<TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" />
</Grid>
</DataTemplate>
Here is how I would do it:-
<Grid MinWidth="800">
<Rectangle x:Name="Background" Fill="Green" Width="{Binding PercentDone, Converter={StaticConverter WidthConv}, ConverterParameter=800}" HorizontalAlignment="Left" />
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" />
<TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" />
</Grid>
</Grid>
Where WidthConv is an instance of a class added to the usercontrol resources that implements IValueConverter. The Convert method would take the input percentage value and apply it to the parameter to return the width the rectangle needs to be to represents that percentage value.
The important point here is that Grid naturaly overlays elements on each other when the occupy the same area.
You cannot set a control as a background as it is of Brush Type.
But if you want to emulate that you can put your Grid in another one like that :
<Grid>
<Grid>
<!-- put your Content here -->
</Grid>
<ProgressBar />
</Grid>