I currently have a reusable overlay, that displays a Button and it's content.
<Border Visibility="{Binding Content, Converter={StaticResource VisibilityConverter}}">
<Border.Background>
<SolidColorBrush Color="White" Opacity="0.8" />
</Border.Background>
<Grid Height="450" Width="450">
<Border Background="NavajoWhite"
CornerRadius="3"
BorderBrush="Black"
BorderThickness="2">
<Grid Margin="10">
<!-- Display Content of selected ViewModel -->
<ContentPresenter Content="{Binding Content}"/>
<!-- Close button -->
<Button Content="X"
FontSize="14"
Width="45"
Height="45"
Command="{Binding Close}"
HorizontalAlignment="Right"
VerticalAlignment="Top" />
</Grid>
</Border>
</Grid>
</Border>
Problem
I have some forms that fit in perfectly to the above XAML
And some forms don't fit
Question
As the height and width are currently set to hard coded values Height: 450 Width: 450 within the XAML, is there a way to auto adjust the grid's height and width depending on it's content inside the Grid? Not to be too small for the content not to be visible and not too large to avoid too much whitespace.
If you do not have a constraint at a higher level (UserControl, Window layout), then split the nested Grid into two lines.
At the bottom line (intended for Buttons), set the autosize.
For the buttons themselves, set the Margin, Padding and their position (aligment).
Perhaps it will be convenient for a row with buttons to first add some kind of general container (StackPanel, UniformGrid, etc.) and add buttons to it.
It is also important: in the layout at a higher level without limiting the maximum size of the main Border to give it some kind of aligment other than «Stretch».
Setting «Stretch » will expand main Border to the maximum possible size.
<Border Background="#80FFFFFF"
Visibility="{Binding Content, Converter={StaticResource VisibilityConverter}}">
<!--<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>-->
<!--<Grid Height="450" Width="450">-->
<Border Background="NavajoWhite" CornerRadius="3" BorderBrush="Black" BorderThickness="2"
MinHeight="450" MinWidth="450">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Display Content of selected ViewModel-->
<ContentPresenter Content="{Binding Content}" />
<!--Close button-->
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Margin="5" Padding="15 5"
Content="Create" FontSize="14" Command="{Binding Close}"/>
<Button Margin="5" Padding="15 5"
Content="X" FontSize="14" Command="{Binding Close}"/>
</StackPanel>
</Grid>
</Border>
<!--</Grid>-->
</Border>
Related
I`ve created big button which contains grid as below:
<Button Height="Auto" Width="Auto" Command="{Binding ContinueWithoutScan}" BorderThickness="0">
<Button.Template>
<ControlTemplate>
<Grid >
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap" Text="Text"
VerticalAlignment="Center" FontWeight="DemiBold"
Height="Auto" Width="Auto"
FontSize="25" Foreground="White"/>
<materialDesign:PackIcon Height="Auto" Width="70" Kind="ChevronRight" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
There is problem that only TextBlock inside Template is clickable. Does anyone know how do I make whole content clickable? I working with MVVM so I dont want make Grid.OnMouseEneter.
Is there option to do that of I have to use EventTriggers?
The Grid needs to have a Background other than the default null to receive input events. You may set a transparent background instead of null:
<Grid Background="Transparent">
...
</Grid>
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
Let me start by saying sorry if this is a duplicate. I was unable to find an answer in any of the similar posts that I have read. I am having an issue where I have a Border control whose Height and Width are bound to the ActualHeight and ActualWidth of a TextBlock that is a child of the Border.
Everything displays fine in the designer, but for some reason at run-time, the Border control is not visible. I am not sure if it is because the Height or Width may be 0, or perhaps the Visibility is being set some other way. If I hard code the Height/Width then everything displays the same in the designer and at runtime, but something is acting bizarre with this binding. Even more bizarre, is that they were working before, and I'm not sure what I could have done to break them. Here is my XAML:
<Grid Visibility="{Binding Path=Contacts.Count, Converter={StaticResource ItemCountToVisibilityConverter}}" >
<Border CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,0,15"
Margin="0,15,0,15">
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border Background="White"
CornerRadius="5"
Height="{Binding Path=ActualHeight, ElementName=ContactsTextBlock}"
Width="{Binding Path=ActualWidth, ElementName=ContactsTextBlock}"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Grid>
It is the second Border control in the XAML that is having the issue. As I said, it displays properly in the designer, but for some reason at runtime, the Border control as well as the TextBlock it contains are not visible. Also, the Grid is working properly, as well as the ListView and the first Border. It is simply the second Border and it's TextBlock that are not functioning properly.
Thanks in advance!
Here is what it looks like at design-time:
Let the Grid do the dirty work for you. I believe the Grid is one of the best controls WPF has.
The trick is dividing the vertical space in three slices, where the two on the top are sized accordingly to the desired space. That is, the TextBlock will determine how tall will be the row pair. You don't have to do anything than enjoying the result...
Here is a sample XAML (I cut the Visibility property for sake of simplicity):
<Grid Margin="40,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border
CornerRadius="5"
BorderBrush="White"
BorderThickness="2"
Padding="20,15,20,15"
Background="DimGray"
Grid.Row="1"
Grid.RowSpan="2"
>
<ListView ItemsSource="{Binding Path=Contacts}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Number}" />
<TextBlock Text="{Binding Path=EmailAddress}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
<Border
Background="White"
CornerRadius="5"
Grid.Row="0"
Grid.RowSpan="2"
HorizontalAlignment="Center"
>
<TextBlock
Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
/>
</Border>
</Grid>
Please, note the ListView border is sharing the middle row, so that the borderline will run "striking" the text.
That renders as follows:
You may want to set up BorderThickness and BorderBrush:
<Border Background="White"
Border Background="White"
CornerRadius="5"
BorderThickness="1"
BorderBrush="Gray"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextBlock Text="Contact Information"
x:Name="ContactsTextBlock"
Foreground="Black"
Padding="5,2,5,2"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
I have this xaml code of my metro app.
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Border BorderThickness="0,0,0,1" BorderBrush="White">
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Opacity="1" Style="{StaticResource BigTopDealItemTitle}"/>
</Border>
</StackPanel>
</Grid>
I wanna make a blur panel and clear text on it. But look like the text in TextBlock blur too, even I set Opacity of it with 1.
To make a background blurry without making the textbox blurry do something like this:
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Grid>
<Border BorderThickness="0,0,0,1" BorderBrush="White"/>
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Style="{StaticResource BigTopDealItemTitle}"/>
</Grid>
</StackPanel>
</Grid>
This will put the TextBlock on top of the background (i.e. the Border) without it being affected by the properties of the Border.
I'm trying to display a modal dialog with a spinning icon to indicate something happening in the background.
I'm using a Popup for the dialog and I've built a UserControl for the content.
The Popup displays fine, but the background is transparent. The content appears as expected. Ideally, I would like a black background with a white border on the popup.
Here is my UserControl:
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
I don't see you defining a background or a border in your xaml. If you want a background and border, you must specify one. I would also recommend doing an "overlay" instead of a popup. An overlay allows you to disable the rest of the page.
<Grid x:Name="Overlay" Visibility="Collapsed">
<Grid Background="{StaticResource PhoneBackgroundBrush}" Opacity=".6"/>
<Border VerticalAlignment="Center" BorderThickness="2"
Background="{StaticResource PhoneBackgroundBrush}" BorderBrush="{StaticResource PhoneForegroundBrush}"
CornerRadius="5" Visibility="Visible" Margin="12">
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"/>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"/>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"/>
</StackPanel>
</StackPanel>
</Border>
</Grid>
Show the overlay by setting it's visibility
Overlay.Visibility = Visibility.Visible;
You're not adding a Border or a Background to your StackPanel.
Something like this should work. Depending on your application, you may just want to use real colors, rather than those based on device theme.
<Border BorderThickness="2" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
<StackPanel Background="{StaticResource PhoneChromeBrush}" VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
</Border>