C# WPF TextBox Style

C# WPF TextBox Style
2013-09-04T14:13:25+02:00
2013-09-05T11:49:12+02:00
2022-10-15T22:11:19+02:00
Peti_22
Üdv,

Egy egyedi kinézetű TextBoxot szeretnék csinálni c# WPF-ben. Expression Blendel próbálkoztam amiben már sikeresen létrehoztam sok szép gombot és checkboxot, de TextBoxnál problémáim akadtak.

Itt egy PSD fájl az effectekről amit látni szeretnék WPF-ben

A fenti linken található képen szereplő effecteket szeretném viszont látni a saját TextBoxomon. Próbáltam képként is de akkor csúnyán elmosódik és nem lesz szép éles kép. Más módszerekkel sem értem el kielégítő eredményt.

ha valaki tudna ebben segíteni az nagyon jó lenne.
Mutasd a teljes hozzászólást!
Most ezzel nem igazán értem mi volt a célod :D de mindegy is mert már megoldottam.

XAML:

<Grid Background="#FF36383B"> <Grid Height="25" Width="200"> <local:ClippingBorder x:Name="TopShadowClippingBorder" BorderThickness="0" CornerRadius="3" ClipToBounds="True"> <Border Height="25" Width="200" x:Name="TopShadowBorder" BorderBrush="Black" BorderThickness="1,1,1,0" Padding="0" CornerRadius="3" ClipToBounds="True"> <Border.Effect> <DropShadowEffect Direction="360" ShadowDepth="1" BlurRadius="3" /> </Border.Effect> </Border> </local:ClippingBorder> <Border Height="25" Width="200" BorderBrush="Black" BorderThickness="1,1,1,2" CornerRadius="3" /> <Border Height="25" Width="200" x:Name="InsetBorder" BorderThickness="0.5,0,0.5,1" CornerRadius="3" > <Border.BorderBrush> <SolidColorBrush Color="White" Opacity="0.28"/> </Border.BorderBrush> </Border> <StackPanel Height="25" Width="200" x:Name="Contents_StackPanel" Margin="0"> <TextBox Text="TextBox" Height="25" Width="200" Background="#19000000" BorderBrush="#00ABADB3" FontStyle="Italic" FontSize="14" FontWeight="Light" > <TextBox.Foreground> <SolidColorBrush Color="White" Opacity="0.6"/> </TextBox.Foreground> </TextBox> </StackPanel> </Grid> </Grid>

C#:

public class ClippingBorder : Border { protected override void OnRender(DrawingContext dc) { OnApplyChildClip(); base.OnRender(dc); } public override UIElement Child { get { return base.Child; } set { if (this.Child != value) { if (this.Child != null) { // Restore original clipping this.Child.SetValue(UIElement.ClipProperty, _oldClip); } if (value != null) { _oldClip = value.ReadLocalValue(UIElement.ClipProperty); } else { // If we dont set it to null we could leak a Geometry object _oldClip = null; } base.Child = value; } } } protected virtual void OnApplyChildClip() { UIElement child = this.Child; if (child != null) { _clipRect.RadiusX = _clipRect.RadiusY = Math.Max(0.0, this.CornerRadius.TopLeft - (this.BorderThickness.Left * 0.5)); _clipRect.Rect = new Rect(Child.RenderSize); child.Clip = _clipRect; } } private RectangleGeometry _clipRect = new RectangleGeometry(); private object _oldClip; }
Mutasd a teljes hozzászólást!

  • Mutasd a teljes hozzászólást!
  • Amit linkeltél ott csak egy egyszerű stílusváltoztatás van. Ez nekem sem jelent problémát. Az általam linkelt PSD fájlban vannak bizonyos effektek amiket nem tudtam lemásolni WPF-ben.

    2 fő ilyen effect van az inner shadow és a drop shadow. A drop az fehér színű és csak az alsó bordernél látszódik az inner fekete és csak a bal oldali és a felső border alatt és mellet látszódik.

    Az alábbi linken találtam valamit ami hasonló mint amit én akarok, de nem bírom életre kelteni:

    Wpf round weird border - Stack Overflow
    Mutasd a teljes hozzászólást!
  • Bocsi, ez gyakori hiba, ezért jó tudni
    Mutasd a teljes hozzászólást!
  • Most ezzel nem igazán értem mi volt a célod :D de mindegy is mert már megoldottam.

    XAML:

    <Grid Background="#FF36383B"> <Grid Height="25" Width="200"> <local:ClippingBorder x:Name="TopShadowClippingBorder" BorderThickness="0" CornerRadius="3" ClipToBounds="True"> <Border Height="25" Width="200" x:Name="TopShadowBorder" BorderBrush="Black" BorderThickness="1,1,1,0" Padding="0" CornerRadius="3" ClipToBounds="True"> <Border.Effect> <DropShadowEffect Direction="360" ShadowDepth="1" BlurRadius="3" /> </Border.Effect> </Border> </local:ClippingBorder> <Border Height="25" Width="200" BorderBrush="Black" BorderThickness="1,1,1,2" CornerRadius="3" /> <Border Height="25" Width="200" x:Name="InsetBorder" BorderThickness="0.5,0,0.5,1" CornerRadius="3" > <Border.BorderBrush> <SolidColorBrush Color="White" Opacity="0.28"/> </Border.BorderBrush> </Border> <StackPanel Height="25" Width="200" x:Name="Contents_StackPanel" Margin="0"> <TextBox Text="TextBox" Height="25" Width="200" Background="#19000000" BorderBrush="#00ABADB3" FontStyle="Italic" FontSize="14" FontWeight="Light" > <TextBox.Foreground> <SolidColorBrush Color="White" Opacity="0.6"/> </TextBox.Foreground> </TextBox> </StackPanel> </Grid> </Grid>

    C#:

    public class ClippingBorder : Border { protected override void OnRender(DrawingContext dc) { OnApplyChildClip(); base.OnRender(dc); } public override UIElement Child { get { return base.Child; } set { if (this.Child != value) { if (this.Child != null) { // Restore original clipping this.Child.SetValue(UIElement.ClipProperty, _oldClip); } if (value != null) { _oldClip = value.ReadLocalValue(UIElement.ClipProperty); } else { // If we dont set it to null we could leak a Geometry object _oldClip = null; } base.Child = value; } } } protected virtual void OnApplyChildClip() { UIElement child = this.Child; if (child != null) { _clipRect.RadiusX = _clipRect.RadiusY = Math.Max(0.0, this.CornerRadius.TopLeft - (this.BorderThickness.Left * 0.5)); _clipRect.Rect = new Rect(Child.RenderSize); child.Clip = _clipRect; } } private RectangleGeometry _clipRect = new RectangleGeometry(); private object _oldClip; }
    Mutasd a teljes hozzászólást!
  • Most ezzel nem igazán értem mi volt a célod

    Arra gondoltam, tán nem mindegy, hogy mellet nézel, vagy valami mellett elnézel.

    a felső border alatt és mellet látszódik


    Persze nem vagy egyedül:

    Keresőkifejezés: mellet Keresés helye: tudástárban A keresés összesen 393 találatot eredményezett.
    Mutasd a teljes hozzászólást!
  • Igen a helyes írásom még a javítóval is borzasztó tudom. Ez nem műveletlenség a részemről! Egyszerűen csak nem áll rá az agyam...
    Mutasd a teljes hozzászólást!
  • Előfordul. A férfiagy erősen koncentrál egy feladatra, így az erősen leköti, így egy párhuzamos feladat (pl. helyesírás) kisebb figyelmet kap(hat) a főfeladat mellett.

    Itt az automatizáltság szintje a kérdéses már.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd