While I was trying to experiment with User Controls, I've stumbled upon this weird issue, which for some reason when I add the User Control to a Window, It just displays the border that I made, while not showing any content inside of it (whether I placed it within a border or a grid)
This is how it looks in the designer:
And this is how it looks in a Window (in designer and on runtime):
As seen, It's not displaying the button nor the label.
User Control:
<Grid Background="{x:Null}">
<Border BorderBrush="#FAF9F9" CornerRadius="20" Background="#FAF9F9">
<Border.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Border.Effect>
<Grid Background="{x:Null}">
<Label Content="Label" HorizontalAlignment="Left" VerticalContentAlignment="Center" Margin="10,280,0,0" VerticalAlignment="Top" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Left" Margin="443,280,0,0" VerticalAlignment="Top" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">
<Button.Effect>
<DropShadowEffect Opacity="0.3" ShadowDepth="2" Direction="270"/>
</Button.Effect>
<Button.Template >
<ControlTemplate TargetType="Button" >
<Grid >
<Path Stretch="Uniform" UseLayoutRounding="False" Fill="#FFEA1E27">
<Path.Data>
<EllipseGeometry RadiusX="1" RadiusY="1"/>
</Path.Data>
</Path>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
</Grid>
Looks like actual size of your control is smaller then design size. Thus, the label and the button are outside of Control's visible part.
Try positioning of Label and Button relative to bottom right and left corners instead of top-left.
<Label Content="Label" HorizontalAlignment="Left" Margin="10" VerticalContentAlignment="Center" VerticalAlignment="Bottom" Height="47" Width="428" FontSize="25"/>
<Button Content="+" HorizontalAlignment="Right" Margin="10" VerticalAlignment="Bottom" Width="47" Height="47" HorizontalContentAlignment="Center" Foreground="White" FontSize="40" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" BorderBrush="{x:Null}">
Related
I'm getting such error
The name 'ScoreBtn' does not exist in the current context
and
The name 'LvlBttn' does not exist in the current context
on c# side but I can get text of Label x:Name="Lines". Where is mistake and how can I fix it?
Thanks for any help,
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Button x:Name="Score" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label x:Name="ScoreBtn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8" Content="Score"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="level" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label Content="Level 1" x:Name="LvlBttn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Label Visibility="Hidden" Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
This will get you the Label for the button named Score. "ScoreBtn"is the name of the label element. It's not as complicated as I thought it would be.
var label = (Label)Score.Template.FindName("ScoreBtn", Score);
You really ought to listen to Peter Duniho, write a viewmodel, and bind the label's Content property to a viewmodel property, but if you don't already have a viewmodel, you may not want to rewrite your entire project. Since you don't have a single Binding in your XAML, I imagine that might be the case.
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>
I am wondering is it possible to change the close button on a floating window in wpf? I currently have it like a windows close with white cross and red background. I also have an image of a black cross and wondering is it possible to take off teh red background and white cross and replace it with my image?
<syncfusion:DockingManager x:Name="DockingManager"
PersistState="True"
UseDocumentContainer="True"
Margin="0,0,0,0"
syncfusion:SkinManager.ActiveColorScheme="#E7E7E7"
HeaderForeground="Black"
SelectedHeaderBackground="{DynamicResource selectedHeaderBackground}"
syncfusion:DockingManager.DesiredHeightInFloatingMode="27"
syncfusion:DockingManager.DesiredHeightInDockedMode="27"
FloatWindowMouseOverHeaderBackground="#F6CD1D"
FloatWindowHeaderBackground="#F6CD1D"
HeaderForegroundSelected="Black"
TabItemBackgroundSelected="{DynamicResource headerBackground}"
TabPanelBackground="#FFE7E7E7"
SidePanelBackground="White"
TabItemsForeground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Background="White"
FloatWindowHeaderForeground="{DynamicResource headerBackground}"
TabItemsBackground="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderForeground="{DynamicResource headerBackground}"
FloatWindowMouseOverHeaderForeground="{DynamicResource headerBackground}"
HeaderBorderBrush="{x:Null}"
OpacityMask="{DynamicResource headerBackground}"
TabItemsBorderBrush="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderBackground="{DynamicResource headerBackground}"
HeaderBackground="{DynamicResource headerBackground}"
TabItemForegroundSelected="#FF4A515A">
<syncfusion:DockingManager.SideItemsBorderBrush>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEFEEEE" Offset="0"/>
<GradientStop Color="#E7000000"/>
</LinearGradientBrush>
</syncfusion:DockingManager.SideItemsBorderBrush>
<dockWindow:LocationMap x:Name="Locationmap"
syncfusion:DockingManager.DesiredHeightInDockedMode="100"
Background="White"
syncfusion:DockingManager.SideInDockedMode="Left"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="300" FontWeight="Bold" FontSize="10.667">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Earth.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Location Map" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
<dockWindow:LocationMap.Foreground>
<ImageBrush />
</dockWindow:LocationMap.Foreground>
</dockWindow:LocationMap>
<dockWindow:Tornado x:Name="TornadoDiagram"
syncfusion:DockingManager.SideInDockedMode="Right"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Tornado1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Tornado Diagram" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Tornado>
<dockWindow:Cdf x:Name="CdfDiagram"
syncfusion:DockingManager.SideInDockedMode="Bottom"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.TargetNameInDockedMode="TornadoDiagram"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold" >
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left" Margin="1"/>
<Image Source="Images/CDF1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1"/>
<TextBlock Text="CDF" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2"/>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Right" Margin="1"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Cdf>
So the best way to do this is to create custom windows yourself and then this allows you to create the window exactly how you want it. It's bit longer than a simple change of one thing in the XAML but it works
How could we arrange the controls on a WPF window so that it would automatically align the controls while switching between view modes occur ie between landscape and portrait mode.
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>
I am building a WPF application which contains a large number of pages. I want to know whether there is any function which is similar to IsPostBack in Asp.Net. I just wanted to know is this the first time the specific page is loading. Thanks in advance.
xaml
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>
If your page navigation is taking place via Frame, then attach to the Frame.Navigated event. If you provide more detail (some XAML and code) then we might be able to be more helpful...