I'm using the Material Design in a WPF XAML application, I've got this section of code bellow, when the grid is outside of a "materialDesign:Flipper" it all renders correctly; ie- it grows/stretch's correctly with the size of the window and it stacks nicely inside of the StackPanel.
However, as soon as I place this code inside of a Flipper, the scaling and positioning becomes skewed. If I start to change the size of the window it will resize funnily and will not stack nicely. Please see both the image and video bellow for more info. Thank you.
Please note all this code is contained within side a "StackPanel", the intention is such that they can be copied and pasted multiple times.
Working Code outside a Flipper:
<Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
Broken Code, inside a Flipper:
<materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
<materialDesign:Flipper.FrontContent>
Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
</materialDesign:Flipper.FrontContent>
<materialDesign:Flipper.BackContent>
<Grid Height="200" Background="{Binding BackColour}">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
</Grid>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
Example Image of render
YouTube Video Demonstration - The one highlighted in red is flipper.
Thank you for any help.
Related
What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)
--Since I was asked for details this is part of the code:
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
Ok I was able to do this with Clemens support:
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
--Answering to another question my XAML for whole control looks like this:
<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
<ItemsControl.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
VerticalAlignment="Top">
<Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
RadiusX="4"
Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
MouseLeftButtonUp="TargetColorClick"
ToolTip="{Binding (extensions:PaletteColor.Name)}" />
<TextBlock TextWrapping="Wrap" Text="16"
Margin="-32,0,0,0" Height="16"
HorizontalAlignment="Center" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
Margin="5,0,0,0" Height="16"
HorizontalAlignment="Left" DockPanel.Dock="Top" />
<TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
Margin="5,0,0,0"
Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
</DockPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel></ItemsControl>
I have a WPF application with one window. In that window I have several StackPanels and several Buttons. White can find each Button perfectly, but with exact the same code just one single Button is seldom found and often not found. I was unable to find out what the cause is for this behaviour. Thats why I came to you guys.
Note: Before the buttons are shown, there is another view (in the same window) that waits for the server to respond. As soon as the response is in, the buttons get displayed.
Here my testcode:
[TestMethod]
public void ClickBarPayment_ViewExchanges()
{
DelayedStart(5);
Application app = null;
try
{
app = Application.Launch(SutPath);
try
{
var window = app.GetWindow("CfeMain");
var button = (Button)window.Get(SearchCriteria.ByAutomationId("CashButton"), TimeSpan.FromSeconds(60));
button.Click();
Assert.AreEqual(false, button.Visible);
}
catch (Exception e)
{
Assert.Fail(e.Message);
}
}
finally
{
app?.Close();
}
}
You can assume, that the Buttons are all equal and all have a Tag " Name="" ". Here is the XAML code, I remove unnecessary names with "Blabla" a.s.o.
<StackPanel Name="PaymentContent" Visibility="Visible" VerticalAlignment="Center" Margin="0,0,0,0">
<StackPanel Height="60" VerticalAlignment="top" Margin="20,0,10,0">
<TextBlock FontSize="24" Foreground="#0b0b0b" Name="info" HorizontalAlignment="Stretch">Bla</TextBlock>
</StackPanel>
<StackPanel Name="options" Orientation="Vertical" HorizontalAlignment="Center" Grid.RowSpan="2" Width="1004">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,15,5,0">
...
...
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,0,5,5">
<Button Name="Blablabla" Click="Blablabl_OnClick" Style="{StaticResource MainButtonBottomLeft}" Background="#efefef" Margin="0,10,10,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="BlablaText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="BlablaInfo"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="BlablablIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/Blasdsd.png" Width="95" Height="35" />
</StackPanel>
</StackPanel>
</Button>
<Button Name="CashButton" Click="Cash_OnClick" Style="{StaticResource MainButtonBottomRight}" Background="#efefef" Margin="0,10,0,0" HorizontalAlignment="Center" Width="490" Height="200">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="400" Height="200">
<TextBlock FontSize="28" Height="40" Margin="0,10,0,0" Name="NoteText">Bla</TextBlock>
<TextBlock FontSize="18" Height="30" Name="NoteInfo"><Run Text="Schweizer Franken Banknoten"/></TextBlock>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Background="#859fcd" Margin="0,10,0,0" Width="460" />
<StackPanel Name="noteIssuer" Height="100" Orientation="Horizontal">
<Image Source="/Images/100frank.jpg" Width="85" Height="55" Margin="0,0,5,0"/>
<Image Source="/Images/50frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/20frank.jpg" Width="80" Height="55" Margin="0,0,5,0" />
<Image Source="/Images/10frank.jpg" Width="75" Height="55" Margin="0,0,0,0" />
<Image Source="/Images/qrCode.png" Width="51" Height="45" Margin="0,28" />
</StackPanel>
</StackPanel>
</Button>
</StackPanel>
</StackPanel>
</StackPanel>
Without actually facing the issue I can make only suggestions.
Potential reason could be that window object getting initialized prior to having all buttons enabled in actual Application window.
You could add a wait time prior to initialize window
I am wanting the position of the item in list to appear to left of the description but for some reason its making my font messed up and placing it in the center as shown in image. I am just wanting to mimic the same image I have on the map so it coresponds to listview poistion.
<DataTemplate x:Key="ImageTextListInboxTemplate">
<StackPanel Orientation="Horizontal" Width="470" Height="85">
<Border Height="40" Width="40" Margin="10,10,0,10" VerticalAlignment="Top">
<Image Source="/SampleImage.png" Stretch="UniformToFill"/>
</Border>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Text="" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Name}" FontSize="20" FontWeight="Semilight"
Margin="10,0,0,0" Width="320" Height="26" TextTrimming="WordEllipsis"
HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="{Binding _Postcode}"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
<TextBlock Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</StackPanel>
<TextBlock Text="00:00 AM" FontSize="9" Margin="20,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
With Circle as above
Without circle by just removing the following code
<Grid Width="40" Height="40">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
Your containing stack panel is fixed at Height="85". Because it's a vertical stack panel it will add items to the control vertically, so you're specifying:
a StackPanel with a 10 top margin;
a Grid of height 40;
an empty TextBlock of height 26;
leaving 9 pixels for your _Name TextBlock, hence the clipping of the TextBlock and everything under it you're seeing there.
There's a number of ways you could get your ellipse grid to the left of one of the text boxes, I would probably consider wrapping a grid around the textblock you want it to be displayed to the left of like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Width="40" Height="40" HorizontalAlignment="Left">
<Ellipse Fill="Blue" StrokeThickness="3"/>
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding _position}"/>
</Grid>
<TextBlock Grid.Column="1" Text="Sed varius rhoncus metus, et condimentum"
Margin="10,2,0,0" Width="320" TextTrimming="WordEllipsis" TextWrapping="Wrap"
HorizontalAlignment="Left"/>
</Grid>
I am building an app in Windows Phone 7.
I am showing a few data in different TextBlocks.
But as the data size is too big, it doesn't fit in my view.
I want to show the data like a paragraph.
If the data size exceeds the size of the emulator I want to put a ScrollBar so that the data can be scrolled and viewed.
Please help me.
I am providing my XAML design.
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<TextBlock TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
<Button x:Name="previous" BorderThickness="0" Click="Image_Back" Margin="0,23,431,682" HorizontalAlignment="Right" Width="76" Height="63" Grid.RowSpan="2">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Image/Previous.png" />
</Button.Background>
</Button>
</Grid>
Try this,
<Grid x:Name="ContentPanel" Margin="12,17,12,0" Grid.RowSpan="2">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Height="63" HorizontalAlignment="Right" Margin="0,6,43,0" Name="textBlock1" Text="News Details" VerticalAlignment="Top" Width="308" FontFamily="Verdana" FontSize="48" Foreground="AntiqueWhite"/>
<TextBlock TextWrapping="Wrap" Height="46" HorizontalAlignment="Left" Margin="45,333,0,0" Name="date" Text="" VerticalAlignment="Top" Width="173" FontFamily="Verdana" FontSize="24" />
<TextBlock TextWrapping="Wrap" Height="43" HorizontalAlignment="Left" Margin="45,397,0,0" Name="title" Text="" VerticalAlignment="Top" Width="373" />
<TextBlock TextWrapping="Wrap" Height="206" HorizontalAlignment="Left" Margin="45,462,0,0" Name="description" Text="" VerticalAlignment="Top" Width="373" />
<Image Height="167" HorizontalAlignment="Left" Margin="45,113,0,0" Name="newsimage" Stretch="Fill" VerticalAlignment="Top" Width="368" />
</Grid>
</ScrollViewer>
</Grid>
More details
http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer(v=vs.110).aspx
http://dotnet.dzone.com/news/scrollviewer-not-scrollable
Try using Scrollable textblock. Hope that help you to solve the issue.
I have this grid in my Page and i have a problem that in landscape mode it rotate and the textbox and the button are stuck in the center and not stretch,any idea how to fix it?
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" >
<StackPanel Orientation="Vertical" Margin="0,0,0,0" Width="480">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center">
<TextBox Name="searchTextBox" Height="72" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="10,0,0,0" TextChanged="SearchTextDidChange" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Width="349" HorizontalAlignment="Left"/>
<Button Content="Search" Margin="0,-3,0,0" VerticalAlignment="Top" Height="77" Click="DidPressSearchButton" HorizontalContentAlignment="Right" VerticalContentAlignment="Top" Padding="14,5,10,6" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
It is because you use stackpanel, use only the grid instead and set the column definition like this!
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="130" />
</Grid.ColumnDefinitions>
<TextBox Name="searchTextBox"
Grid.Column="0"
Height="72"
TextWrapping="Wrap"
Text=""
VerticalAlignment="Top"
Margin="10,0,0,0"
TextChanged="SearchTextDidChange"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"
/>
<Button Content="Search"
Grid.Column="1"
Margin="0,-3,0,0"
VerticalAlignment="Top"
Height="77"
Click="DidPressSearchButton"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Top"
Padding="14,5,10,6"
HorizontalAlignment="Right" />
</Grid>
First remove the Width="480" attribute from the first StackPanel. Also remove the Width="349" attribute from the TextBox element.
That should allow the elements to stretch on landscape mode.