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>
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>
I want to create a button having image and label as content in the bottom and notification image on the Upper right corner as in the WhatsApp whenever there is notification.
I can work with Notification logic but can't able to display the image properly as shown in the figure.
I tried with canvas and grid but not able to do that.Any help will be appreciated.I also tried using dock panel and stack panel but was unable to achieve the same.
<Button Name="JobViewer" Tag="JobsIcon" Style="{DynamicResource ButtonAppStyle}" Margin="5" Click="UpdateAction" ToolTip="{Binding RelativeSource={RelativeSource Self }, Path=Name}" >
<Button.Content>
<DockPanel>
<Image DockPanel.ZIndex="2" Source="{StaticResource ContainerZoomWarningLightIcon}" DockPanel.Dock="Top" MaxHeight="40" MaxWidth="40" HorizontalAlignment="Right" ></Image>
<Label Content="JobViewer" DockPanel.Dock="Bottom"></Label>
<Image DockPanel.ZIndex="1" Source="{StaticResource JobsIcon}" ></Image>
</DockPanel>
</Button.Content>
</Button>
the image i get
the image i want
You could specify the <Button> content to give yourself the layout you want.
<Button Width="70" Height="70" Background="Transparent">
<Button.Content>
<Canvas Background="Black">
<Border CornerRadius="8" Height="50" Width="50" Canvas.Left="-25" Canvas.Top="-25"
BorderThickness="0" BorderBrush="Black" Background="#FF47B137">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
<Border CornerRadius="20" Width="20" Height="20" Canvas.Left="10" Canvas.Top="-30"
BorderBrush="White" BorderThickness="2" Background="#FFE40814">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
</Canvas>
</Button.Content>
</Button>
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>
I'm trying to experiment with WPF, so I created some test window to see how it goes and I encountered a little behavior I did not expect with the HorizontalAlignment property.
First of all the screen looks like this:
The problem is, that in the bottom row of the marked grid, I wanted to have the left textBlock and CheckBox aligned to the left, the center textBlock and DatePicker aligned to the center and the same with the right. As you can see in the picture earlier, it doesn't really happen.
The XAML for this grid row:
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="10">Filter By Date</TextBlock>
<CheckBox HorizontalAlignment="Left" Margin="2" Height="18" Width="13"></CheckBox>
<TextBlock HorizontalAlignment="Center" Margin="10">Begin Date</TextBlock>
<DatePicker HorizontalAlignment="Center" Margin="2"> </DatePicker>
<TextBlock HorizontalAlignment="Right" Margin="10">End Date</TextBlock>
<DatePicker HorizontalAlignment="Right" Margin="2"></DatePicker>
</StackPanel>
How do i make them be closer to the edges and center and not just one after another like I guess is the automatic StackPanel's layout?
Horizontal StackPanel will ignore HorizontalAlignment of its children but you can use Grid instead with 3 StackPanel aligned left, centre and right:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock Margin="10">Filter By Date</TextBlock>
<CheckBox Margin="2" Height="18" Width="13"></CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Margin="10">Begin Date</TextBlock>
<DatePicker Margin="2"> </DatePicker>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Margin="10">End Date</TextBlock>
<DatePicker Margin="2"></DatePicker>
</StackPanel>
</Grid>
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.